WordPress.org

Support

Support » Themes and Templates » How do I center the navigation menu?

How do I center the navigation menu?

Viewing 15 replies - 1 through 15 (of 22 total)
  • Tareq
    Member

    @worthingtech

    It’s looking very central to me, even if it’s not set as central.

    its_francesca
    Member

    @its_francesca

    Yes it does with so many pages until I put them as sub-pages (that’s what it is like now), then it’s left-aligned again :/

    Tareq
    Member

    @worthingtech

    OK, try the following in your stylesheet.

    .menu-main-menu-container ul {
        margin: 0 auto;
        display: table;
        float: none;
    }

    I’ll keep my eye on it!

    its_francesca
    Member

    @its_francesca

    That did move it but now it’s right-aligned

    Tareq
    Member

    @worthingtech

    I appear to have just broken my Chrome Dev tools, I’ll be back in a minute…

    its_francesca
    Member

    @its_francesca

    Okay sure, sorry if that’s anything to do with me!

    Tareq
    Member

    @worthingtech

    No not at all!

    Tareq
    Member

    @worthingtech

    Okay, in the snippet I posted, remove the the ul so it should now read:

    .menu-main-menu-container {
        margin: 0 auto;
        display: table;
        float: none;
    }
    its_francesca
    Member

    @its_francesca

    GENIUS! It worked.. Thank you so much

    Would you know the coding to change the font of the navigation bar?

    Tareq
    Member

    @worthingtech

    What font are you thinking of having?

    its_francesca
    Member

    @its_francesca

    I’d be happy if I could have the entire site in ‘Quicksand’ as this is what I’m using for the page titles I’m just not sure of the coding to also change the navigation bar and the body text on the pages

    Tareq
    Member

    @worthingtech

    If you’re talking about the Quicksand Google font you can use an @import at the very top of your stylesheet, like so:

    @import url(http://fonts.googleapis.com/css?family=Quicksand);

    Then change this:

    .main-navigation ul {
    	list-style: none;
    	margin: 0;
    	padding-left: 0;
    	zoom: 1;
    }

    to this:

    .main-navigation ul {
    	list-style: none;
    	margin: 0;
    	padding-left: 0;
    	zoom: 1;
            font-family: 'Quicksand', sans-serif;
    }

    That’ll do the trick!

    its_francesca
    Member

    @its_francesca

    I must have done something wrong, I can’t seem to get that to work.

    I changed all you said in the style.css, is this correct?

    its_francesca
    Member

    @its_francesca

    And I’ve tried putting it in the Custom CSS too which didn’t work

    its_francesca
    Member

    @its_francesca

    I take it back, it has worked now haha thank you super much for your help!

    Do you know the code to change the body text of the pages to the same Quicksand font?

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘How do I center the navigation menu?’ is closed to new replies.