• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Center primary navigation menu

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.
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
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2023 · Appfinite · Built With The Genesis Framework