Can't center nav bar
-
It may be hard to tell, but the text in my nav bar above the header is off-centered. The only reason it almost looks centered is because I have it filled with links, but I would like to center it so I could remove some of those. I’ve tried to obvious things in my CSS, but for whatever reason, I can’t figure it out. Suggestions?
The blog I need help with is: (visible only to logged in users)
-
This will do it, but there are disclaimers: It blows up if the menu system goes to a second line (goes back to float left).
#wrapper { overflow: hidden; } #nav ul { float: left; left: 50%; position: relative; } #nav ul li { position: relative; right: 50%; }Also do this to split the padding on left and right of the menu items so it looks more centered.
#nav li a { padding-left: 7px; padding-right: 7px; } -
That’s okay because I don’t want two lines. So if I get rid of a link or two in the nav this will still be centered?
-
Try this:
#nav ul { display: inline-block; margin: 2px auto; }Make sure to test it in a few different browsers.
Try to remove some of the other unnecessary CSS you added before like “float: center” to take a way some clutter.
-
-
-
-
-
-
-
Try scrolling down to one of the menus that branches off. If you go to “recipes and more” then recipes, the next menu that comes up is cut off on the right.
-
-
- The topic ‘Can't center nav bar’ is closed to new replies.
WordPress.com Forums 