How do I center the primary navigation menu on the page?

[dvachon]

I'm trying to figure out how to center my primary nav menu items within the page or menu itself. Essentially, I just want the menu items to space out perfectly and centered within the width of the nav bar. Any help would be appreciated!
The site is http://www.charlies-studio.com/ and as you'll see/notice, the theme is Runway.

http://www.charlies-studio.com/

[Tony @ AlphaBlossom]

Hello,

You can add "text-align: center" to your .genesis-nav-menu (around line 778).

For .genesis-nav-menu li (around line 796) change "float: left;" to "float: none;"

If you add submenus, you may have to do a little more, as those will be centered too.

Have a great night,
Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[pgapg2]

Hi, Tony

I tried implementing that code on my Runway CSS file, but the Nav Bar's still aligned to the left :/. Here's what I've ended up with:

.genesis-nav-menu {
border-bottom: 2px solid #1E1E1E;
clear: both;
overflow: hidden;
text-align: center
}

#header .genesis-nav-menu {
float: none;
margin-top: 48px;
margin-top: 3rem;
width: auto;
}

.genesis-nav-menu ul {
float: none;
width: 100%;
}

.genesis-nav-menu li {
display: inline-block;
float: left;
list-style-type: none;
text-align: center;
}

I've only been on WP for about a month, so do forgive me if this seems like a no-brainer. Thanks in advance!!!

[Tony @ AlphaBlossom]

No worries 🙂

Are those changes still there? I looked in your style.css file but I didn't see them.

Did you make the changes to this file ...wp-content/themes/runway/style.css?

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[pgapg2]

Hi, Tony!

Which site were you looking at? (I have a few on WP.) This one's for the altercreations.net one at http://altercreations.net/wp-content/themes/runway/style.css. The changes I made (e.g., all the "float"s are set to "none" and the "text align"s to "center) are still there, but the header's still aligned to the left. :/...

Let me know if you have any more Qs and thanks so much for looking into this.

[Tony @ AlphaBlossom]

Hi! I'm so sorry, I just automatically looked at the link in the first post...which I now see is not yours 🙁

Everything looks good except for this part around line 795 in your style.css file:

.genesis-nav-menu li {
   display: inline-block;
   float: left;
   list-style-type: none;
   text-align: center;
}

Just change "float: left;" to "float: none;" and you will be good to go. Sorry for mixing your post up with the original! Have a great day!!!

Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[pgapg2]

Hey Tony,

No prob! Though that didn't work either. What could be going on? I don't want to give up on this theme b/c I felt it was perfect, but I might have to if I can't center the friggin' menu! Argh...

Thanks for trying, though! If you can think of anything else, I'm all ears.

[Tony @ AlphaBlossom]

It looks like it's right now.

Try clearing your cache or looking in another browser and you should see the fix.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[pgapg2]

Ha yes, it does. I knew I should have given it a few minutes : ) and looked elsewhere.

(From me and all those who'll look at this thread in the future>>) Thanks SO much for your help, Tony!

[Tony @ AlphaBlossom]

You're so welcome! Glad to see we weren't going crazy 😉

Have a great night!

Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[dvachon]

Hey Tony!
I was hoping you could help me with another site, with the same question...

The site url is http://www.theLinkedGroup.com/. I need to center the primary nav menu items, but now on this one (an agentpress theme), I cannot seem to figure it out. Can you take a look at the css and let me know what I'm missing here?

Thanks!
Daniel Vachon

[Tony @ AlphaBlossom]

Hey Daniel,

How are you? I've been playing with a method that is a little easier...it uses the display: table property, which doesn't work in ie7 or below but should work great in all other major browsers...if that's an issue let me know. The code above should work as well if you'd rather go that route let me know and i'll post with that solution.

Here's the only change, around line 382 of your theme's style.css:

#nav ul {
    display: table;
    float: none;
    margin: 0 auto;
    padding: 0 0 0 10px;
    width: auto;
}

I tested it out on your site and it works great.

Have a great day!

Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[dvachon]

Cool, thanks Tony!!! I just made the changes, and you are right, it centered it in the nav menu bar! Thanks!

Ok, but another question...(if you've got the time)... When centering that way, it just seems to move the entire block of nav menu items to the center, and just centers that whole block to the middle. Do you know of any way of having the nav menu items spread out across the menu bar in an equally-spaced fashion? For example, the spaces in between each nav menu item would be spaced out a bit more, in this case.
Do you get what I'm saying? (sorry if I'm not explaining well enough).

Thanks Tony!
Daniel

[Tony @ AlphaBlossom]

Glad it worked!

I think the easiest way is to increase the padding for #nav li a, something like "padding: 9px 25px;"

Your site's not responsive, so you don't have to worry about the width changing. You could change the 25px to whatever looks right.

So you have to change the ul back and change the padding on your menu items:

#nav ul {
    display: block;
    float: left;
    margin: 0 auto;
    padding: 0;
    width: auto;
    text-align: center;
}

Change the menu items:

#nav li {
    display: inline-block;
    float: none;
    list-style-type: none;
}

and to keep the sub menus left aligned:

#nav ul ul {
    text-align: left;
}

Not sure what you want to do with the submenus...currently they are centered on the parent menu item. You can move them by adjusting the left margin, add more padding, make them wider, etc...

But this should take care of your main menu.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[dvachon]

Cool. That's perfect! Yeah, I'll need to make it my 2014 resolution to rebuild with a responsive theme.

I made those changes and played around with the padding. It looks good. Thank you again, so much, Tony!

Have a good weekend, and a Merry Christmas.

Thanks,
Daniel

[Tony @ AlphaBlossom]

It's a great idea with so many people browsing on mobiles.

So glad I could be of help. Merry Christmas to you too Daniel!

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Author]

Posts