Vertical Dot Navigation – trying to make spans absolutley positioned.

[ainsley_clark]

Hi there,

Im trying to create a vertical dot navigation very similar to this:
https://codyhouse.co/demo/vertical-fixed-navigation-2/index.html

Where there are dots aligned vertically, and when the user rolls over it, text (spans) comes in from the right and the dots enlarge.

Im having a big problem with trying to align my spans within the navigation.
Basically the spans should have a margin-bottom of 30px so they are quite well spaced out, but should’nt effect the dots, much like the link I have attached.

https://codepen.io/ainsleyclark/pen/ePxjyR?editors=1100

I have tried every single possible combination I could think of.

Many thanks in advance.

[Beverleyh]

Im having a big problem with trying to align my spans within the navigation.

Are you saying that you want the circles to be alongside the links, on the same line?

That can’t happen because divs are block elements and blocks want to be on their own line. They’ll push whatever is next to them (like your spans) onto the line below. Try changing them to inline-blocks instead.

Also try putting the margin on the li rather than the div circles.

[ainsley_clark]

Hi, Thanks for your reply.

I’m basically wanting independant control of the margin bottom property of the spans, doesn’t matter if there.on the same line or not.

Can’t seem to get it.

Thanks again.

[ainsley_clark]

So that the spans are twice or three times the margin top and bottom than the dots. If that makes sense.

Is this possible?

[Beverleyh]

I didn’t understand what you were trying to do because I was on mobile and the link just shows a mobile menu as a button with 3 tiny vertical dots.

But I just checked on tablet and saw the larger screen menu.

First, I think you should remove absolute positioning from the spans. That’s going to pull them out of the flow of the document so that other elements can’t “see” them.

Next, try changing the display value of the span so that it’s not an inline element anymore. Margins don’t have any affect on inline elements so I think that’s part of your problem.

Also be aware that elements have default margins/paddings, etc. So you’ll probably want to neutralise what’s on the ul so that you can center your circles more easily.

[ainsley_clark]

HI Beverley,

Many thanks for your reply again,

I have attached a (fairly jagged) picture of what Im trying to achieve, one on the right is what I have and one on the left is what I need.

Heres the link https://www.ainsleyclark.com/cssproblem.jpg

If I change the spans to relative, then they will always flow below the dots instead of evenly spaced.

Thanks again.

[Beverleyh]

Yes, my previous advice should do that.

[ainsley_clark]

Hi Beverley,

In spite of my best efforts I still can’t achieve what I need.

If the spans are relative, they will directly fall below the dots, and then if I apply a margin top and/or bottom to them, it effects the spacing between the dots (which isn’t what I want).

I need the spans to have a greater margin top or bottom without effecting the dots.

Any other ideas?

Many thanks again for your help.

[Beverleyh]

Decrease the margin on the circles while you increase the margin on span. Might take a few tries until it visually looks the same with the spacing of the circles. Have a before and after page open in the browser so you can flick back and forth to compare.

[ainsley_clark]

Thank you Beverley!

I used a transform translate in the end to push them up.

Thank you very much for your help.

[Author]

Posts