Home › Community Forums › Epik Theme Support › 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.
-
AuthorPosts
-
November 18, 2013 at 4:35 pm #8975
serenae
CustomerI’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 #9001teamweb
CustomerHave a link, please.
November 19, 2013 at 9:35 am #9002serenae
CustomerHere’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 #9091serenae
CustomerOkay, 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 #9122Eric
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 #9301serenae
CustomerI 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 #9308Eric
CustomerLooks fine to me.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
January 12, 2014 at 4:43 pm #9974serenae
CustomerSo 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 #9993theapril
CustomerI 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 #9996serenae
CustomerThat 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 #9999theapril
CustomerGreat! 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.
-
AuthorPosts
- You must be logged in to reply to this topic.