Center primary navigation menu

Tagged: align, center, nav, navigation, primary

This topic has 10 replies, 4 voices, and was last updated 9 years, 2 months ago by theapril.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
November 18, 2013 at 4:35 pm #8975

serenae
Customer

I’m going crazy trying to center the primary nav area! Tried adding text-align:center to nav-primary and genesis-nav-menu, and even tried centering the wrap. No dice. Where am I going wrong?

November 19, 2013 at 9:29 am #9001

teamweb
Customer

Have a link, please.

November 19, 2013 at 9:35 am #9002

serenae
Customer

Here’s the link, though it shouldn’t really matter because it’s just a standard Epik install: http://loveoffrench.org/

November 22, 2013 at 1:14 pm #9091

serenae
Customer

Okay, so here’s a fix that worked for me. Not sure if it’s the best way, but it’s the best I could come up with.

To center the logo:
.site-header {
background-position: center top !important;
max-width: none;
}

To center the primary navigation menu (change max-width to fit your menu):
.nav-primary {
max-width: 500px;
}

November 24, 2013 at 8:50 pm #9122

Eric
Customer

@serenae did you get everything working ok?

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

December 3, 2013 at 9:13 am #9301

serenae
Customer

I did what I mentioned above and it looks okay so far- I was just concerned that maybe it wasn’t the cleanest way to accomplish that.

December 3, 2013 at 11:38 am #9308

Eric
Customer

Looks fine to me.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

January 12, 2014 at 4:43 pm #9974

serenae
Customer

So I need a better way to center the menu after all. The fix I came up with doesn’t work well in all browsers. Shouldn’t there be a simple way to center the primary navigation menu by using text-align: center? I’ve seen it work on other Genesis websites, like this one: http://thewebshoppe.net/ Help!

January 13, 2014 at 3:09 pm #9993

theapril
Customer

I think I just figured this out. It has been driving me crazy. Ok, so find this code under *site navigation*
.genesis-nav-menu {
clear: both;
color: #ccc;
font-size: 13px;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 1px;
letter-spacing: 0.1rem;
line-height: 1.5;
margin: 0;
padding: 0;
width: 100%;
}

.genesis-nav-menu .menu-item {
float: left; <<<<<<<<<<<<change left to none
list-style-type: none;
display: block;
margin: 0;
padding: 0;

–Right under this paste this following code and change the above float from left to none.

.genesis-nav-menu .menu-item {
display: inline-block;
text-align: center;
}

–Right after that you will see this:

.genesis-nav-menu a {
border: none;
color: #fff;
display: block;
font-weight: 400;
padding: 13px;
position: relative;
}

.nav-primary .genesis-nav-menu a {
color: #fff;
padding: 13px 26px 13px 0;
}

–Right after this, paste this code:

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

I hope this works for you.

January 13, 2014 at 4:13 pm #9996
serenae
Customer
That worked perfectly, thanks! Rather than messing with the theme css file, I just added this to Jetpack’s custom code:
```
.genesis-nav-menu .menu-item {
	display: inline-block;
	text-align: center;
	float: none;
}

.nav-primary .genesis-nav-menu {
	text-align: center;
}
```
January 13, 2014 at 5:39 pm #9999

theapril
Customer

Great! I’m glad it worked. I had been having problems with the genesis css editor. I didn’t even think of the jetpack one, ha ha.
Author

Posts