Please Help! Center the Menu options on the Nav. Bar

[CourtneyTU]

I feel like i'm searching for a needle in a haystack...can someone please point me to the css code where I would be able to place the menu items on my navigation bar in the CENTER instead of the left?

Courtneydevon.com

 

Thanks!

[John]

Courtney,

Adding this to your style.css should do the trick:

.menu-primary {
text-align: center;
}
.menu-primary li {
display: inline-block;
float: none;
}

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[PhilMurray]

hi John

sorry i tried adding your code to the stylesheet but didn't seem to work - any ideas?

demo site is here

thanks

 

Phil

[John]

Hi Phil,

In line 310 of your style.css change the float:left to this:

.menu-primary li,
.menu-secondary li,
#header .menu li {
float: none;
list-style-type: none;
}

Or just add it to the end of your style.css file.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[PhilMurray]

brilliant John - worked a treat!

thanks again

Phil

[John]

You're welcome!

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[valmistaudu]

Hello,

Im facing the same problem with modern portfolio pro. I would like to center the main navigation bar. This code and a few other tips haven't worked. Could you please help? 🙂

Another issue I'm having is that...I would like the menus hover color (in this case the green) to stay green when in current page. Any tips?

Thanks

http://www.valmistaudu.fi/genesis

[John]

valmistaudu,

This should center your main navigation:

.nav-primary .genesis-nav-menu.menu-primary { text-align: center; }

For the current page menu item, change line 1054 from this

.genesis-nav-menu a:hover,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover {
	background-color: #80c053;
	color: #80c053;
}

to this

.genesis-nav-menu a:hover,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu.menu-primary .current-menu-item a {
	background-color: #80c053;
	color: #fff;
}

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[valmistaudu]

Awesome! worked perfectly.

Thank you.

[John]

You're welcome! Glad it worked.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Author]

Posts