How to center primary nav bar but leave secondary nav bar full-width in Prose

[Jamie]

Hi, I am using Prose. Up until this point, I have only been using the secondary nav bar below the header. Now I want to add in the primary nav bar above the header as well, and put a few menu buttons up there.

My secondary nav bar is full-width and I want to leave it that way. Someone from this forum provided some custom code awhile back to make that happen. But the problem is that now, when I add the primary nav bar, it also becomes full-width, and my menu buttons show up all the way over to the left side of the screen (in the white space - not over the content area).

How do I change the custom code to make the primary nav bar appear in its normal spot, left-justified over the wrap area only, and leave the secondary nav bar full-width?

http://www.fromhispresence.com is my link.
Thank you so much!

http://www.fromhispresence.com

[Brad Dalton]

Try this http://wpsites.net/web-design/center-align-nav-menu/

---

Tutorials for StudioPress Themes.

[Jamie]

Thank you. I just tried it. It didn't work, unfortunately.

[Jamie]

This is the custom code I already have, if it helps:
/***full-width subnav***/
body {
width: 100%;
}
#subnav ul {
float: none;
margin: 0 auto;
width: 970px;
}
#footer {
width: 970px;
}

[Brad Dalton]

Works for me. I use it on my own site.

I see you have minified your CSS using a plugin which is why it may not be updating and makes it hard to test with Firebug.

Also note the CSS in the post i linked to works on HTML 5 themes and not the old themes running XHTML markup.

In your case try:

#nav {
    text-align: center;
}

After you turn off minification.

---

Tutorials for StudioPress Themes.

[Jamie]

Ok, I disabled minification and added the code. I tried it at the top of the Custom Code field and at the end of the other nav bar code. But neither place fixed it. Should I move it somewhere else?
Thanks for your help!

[Jamie]

Hey! I think I did it! I used different code, and I know NOTHING about coding anything, but it's sitting back in its proper place with this code (I copied the code you had above and tweaked it a bit based on the custom code I already had):
#nav {
float: none;
margin: 0 auto;
width: 970px;
}
The only problem is that now it added too much white margin between the primary nav bar line and the Hello Bar. Do you happen to know why the header and nav bar would have moved down, and how I can move them back up?
Thank you so much! 🙂

[Author]

Posts