Nav Links Around Center Logo

[jbs93]

I created a Navigation Bar with a logo in the center. My goal is to get the links to be on both sides of it in the center.

You can see what I mean here:
http://ludiquemag.com/ztestpt1.html

EXCEPT that I wanted the bar skinnier. There comes in the second alternate version where the bar size is perfect but the links are not going on both sides equally now because of the change in code.
http://ludiquemag.com/ztestpt2.html

So basically I would like the size of bar like the 2nd one, but with the links setup on both sides like in the first link.

Any idea how to fix this?

[chrisburton]

There’s a few discussions on this already.

[jbs93]

@deeve007 it’s set centered, but i’m a little confused as exactly how to implement the margins. Would that be in the “.nav li” part of the css or in the HTML?

@chrisburton I looked through them before posting and didn’t see any solutions in them that fixed my problem.

[Paulie_D]

My inclination would be to use inline-block, text-align:center and vertical-align:middle.

Pretty close. Adjust any numbers as required.

http://codepen.io/Paulie-D/pen/gDzch

[chrisburton]

I would use absolute positioning because there should be `

Site name

` in there. It shouldn’t be inside a list item.

[Paulie_D]

It’s an option.

I suppose one could dispense with the menu and just use anchor links and the Codepen think would still work with a little tweaking.

[wolfcry911]

http://codepen.io/wolfcry911/pen/HyLdg

[jbs93]

@Paulie_D thanks man, tried the method from your codepen and it worked! I guess my problem was that I wasn’t putting it as a background-image.

thanks everyone else who chimed in as well!

[chrisburton]

I would go with wolfcry’s solution. But I’d wrap an `

` around the anchor.

[jbs93]

@chrisburton I tried that way now too because the other codepen was messing up the rest of my page.
However, for some reason the links are staying below the bar now no matter what position I change in the css and also keep turning yellow when you hover over them.
http://ludiquemag.com/ztestpt4.html

[wolfcry911]

jbs93, you can’t just take my css and plug it into your page and expect it to work with your html. You’ll need to make adjustments. The logo needs to be positioned absolute, not relative. And you’ve added an h1 around the anchor (like chrisburton suggested) which is fine, but now you’ll need to target the h1 and not the anchor. Then you’ll need to make your ul wider to accomodate everything. And finally adjust the left margin on the fourth line item.

[cbgraphics]

wolfcry911, you are the best person in the whole world. I created an account on this site just because of your awesomeness.

Thanks for that pen.

[Author]

Posts