Please Help! Center the Menu options on the Nav. Bar

Community Forums Forums Design Tips and Tricks Please Help! Center the Menu options on the Nav. Bar

This topic is: not resolved

This topic contains 9 replies, has 4 voices, and was last updated by  John 3 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #5126

    CourtneyTU
    Participant

    I feel like i’m searching for a needle in a haystack…can someone please point me to the css code where I would be able to place the menu items on my navigation bar in the CENTER instead of the left?

    Courtneydevon.com

     

    Thanks!

    #5134

    John
    Participant
    Post count: 153

    Courtney,

    Adding this to your style.css should do the trick:

    .menu-primary {
    text-align: center;
    }
    .menu-primary li {
    display: inline-block;
    float: none;
    }

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #13676

    PhilMurray
    Participant
    Post count: 39

    hi John

    sorry i tried adding your code to the stylesheet but didn’t seem to work – any ideas?

    demo site is here

    thanks

     

    Phil

    #13689

    John
    Participant
    Post count: 153

    Hi Phil,

    In line 310 of your style.css change the float:left to this:

    .menu-primary li,
    .menu-secondary li,
    #header .menu li {
    float: none;
    list-style-type: none;
    }

    Or just add it to the end of your style.css file.

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #13694

    PhilMurray
    Participant
    Post count: 39

    brilliant John – worked a treat!

    thanks again

    Phil

    #13717

    John
    Participant
    Post count: 153

    You’re welcome!


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #86270

    valmistaudu
    Member
    Post count: 4

    Hello,

    Im facing the same problem with modern portfolio pro. I would like to center the main navigation bar. This code and a few other tips haven’t worked. Could you please help? :)

    Another issue I’m having is that…I would like the menus hover color (in this case the green) to stay green when in current page. Any tips?

    Thanks

    http://www.valmistaudu.fi/genesis

    #86318

    John
    Participant
    Post count: 153

    valmistaudu,

    This should center your main navigation:

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

    For the current page menu item, change line 1054 from this

    
    .genesis-nav-menu a:hover,
    .genesis-nav-menu .sub-menu .current-menu-item > a:hover {
    	background-color: #80c053;
    	color: #80c053;
    }
    

    to this

    
    .genesis-nav-menu a:hover,
    .genesis-nav-menu .sub-menu .current-menu-item > a:hover,
    .genesis-nav-menu.menu-primary .current-menu-item a {
    	background-color: #80c053;
    	color: #fff;
    }
    

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #86417

    valmistaudu
    Member
    Post count: 4

    Awesome! worked perfectly.

    Thank you.

    #86431

    John
    Participant
    Post count: 153

    You’re welcome! Glad it worked.


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

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

You must be logged in to reply to this topic.