- This topic has 7 replies, 4 voices, and was last updated 7 years, 11 months ago by .
Viewing 8 posts - 1 through 8 (of 8 total)
Viewing 8 posts - 1 through 8 (of 8 total)
- You must be logged in to reply to this topic.
Home › Community Forums › Ally Theme Support › How to Center the Primary Nav
Tagged: navigation
How would I go about centering the primary nav?
Thanks
Kris
If you can provide a link to your site then I can tell you which line you’ll need to adjust in your css.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Are you referring to the Primary Navigation that shows under the logo/header or the header right widget area? Because all I see is the header right widget area nav.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
I added it now.
In your css file, add “text-align: center;” to line 306 (.menu-primary).
Then on or around line 317 change the float to “none” and add “display: inline-block;” like this –
.menu-primary li, .menu-secondary li, #header .menu li {
display: inline-block;
float: none;
list-style-type: none;
}
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Hi Eric,
Let me know if I need to open another ticket, but I’m trying this on the latest version of Ally and I don’t see .menu-primary in my CSS or the .menu-primary li, etc. section. Did some of these change with the update to the theme?
Here’s my site address: http://541.38f.myftpupload.com/
Thanks,
Fran
@socialspark I can help with this….Since the above conversation is dated back in early 2013 it’s safe to say they were using an older version of the theme. However, we can still get your menu to center in the version you’re using. If you have a look in your style.css near line 1630 you’ll see this –
.genesis-nav-menu .menu-item {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}
Change the float: left
to none
and add display: inline-block;
. It should look like this when you add in those changes –
.genesis-nav-menu .menu-item {
display: inline-block;
float: none;
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}
I tested this on your site and this was the result – http://i.imgur.com/Mg0KbTO.png
Let me know if you get it working.