WordPress.com Forums » Topic: Can't center nav bar

thesacredpath on "Can't center nav bar"

thesacredpath — Mon, 19 Dec 2011 19:44:40 +0000

You are welcome.

thesmartcookiecook on "Can't center nav bar"

thesmartcookiecook — Mon, 19 Dec 2011 19:20:52 +0000

Ah thank you!

thesmartcookiecook on "Can't center nav bar"

thesmartcookiecook — Mon, 19 Dec 2011 19:20:00 +0000

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.

thesacredpath on "Can't center nav bar"

thesacredpath — Mon, 19 Dec 2011 19:19:40 +0000

Oh, I see. Remove the "overflow: hidden;" from #wrapper.

thesacredpath on "Can't center nav bar"

thesacredpath — Mon, 19 Dec 2011 19:18:02 +0000

I'm not seeing anything cut off. All the dropdowns appear complete to me.

thesmartcookiecook on "Can't center nav bar"

thesmartcookiecook — Mon, 19 Dec 2011 19:14:00 +0000

Okay, now my drop-down menus in the nav bar are cut off.

thesmartcookiecook on "Can't center nav bar"

thesmartcookiecook — Mon, 19 Dec 2011 19:01:49 +0000

Okay, thank you both!

thesacredpath on "Can't center nav bar"

thesacredpath — Mon, 19 Dec 2011 18:48:27 +0000

Yours is much less complex than mine.

Use @designsimply's solution.

designsimply on "Can't center nav bar"

designsimply — Mon, 19 Dec 2011 18:47:03 +0000

I should've refreshed. :)

thesacredpath on "Can't center nav bar"

thesacredpath — Mon, 19 Dec 2011 18:46:49 +0000

Yup.

designsimply on "Can't center nav bar"

designsimply — Mon, 19 Dec 2011 18:46:30 +0000

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.

thesmartcookiecook on "Can't center nav bar"

thesmartcookiecook — Mon, 19 Dec 2011 18:45:29 +0000

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?

thesacredpath on "Can't center nav bar"

thesacredpath — Mon, 19 Dec 2011 18:36:09 +0000

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;
}

thesmartcookiecook on "Can't center nav bar"

thesmartcookiecook — Mon, 19 Dec 2011 16:16:05 +0000

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?

my site