WordPress.org

Ready to get started?Download WordPress

Forums

Vantage
How do I center the navigation menu? (23 posts)

  1. its_francesca
    Member
    Posted 7 months ago #

    I did it following someone elses feedback earlier today and it was fine until I turned a couple of my pages into sub-pages and now it's left-aligned again.

    Any one know what to do?

    http://www.skelefox.com

    Thank you

  2. Tareq
    Member
    Posted 7 months ago #

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

  3. its_francesca
    Member
    Posted 7 months ago #

    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 :/

  4. Tareq
    Member
    Posted 7 months ago #

    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!

  5. its_francesca
    Member
    Posted 7 months ago #

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

  6. Tareq
    Member
    Posted 7 months ago #

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

  7. its_francesca
    Member
    Posted 7 months ago #

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

  8. Tareq
    Member
    Posted 7 months ago #

    No not at all!

  9. Tareq
    Member
    Posted 7 months ago #

    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;
    }
  10. its_francesca
    Member
    Posted 7 months ago #

    GENIUS! It worked.. Thank you so much

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

  11. Tareq
    Member
    Posted 7 months ago #

    What font are you thinking of having?

  12. its_francesca
    Member
    Posted 7 months ago #

    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

  13. Tareq
    Member
    Posted 7 months ago #

    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!

  14. its_francesca
    Member
    Posted 7 months ago #

    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?

  15. its_francesca
    Member
    Posted 7 months ago #

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

  16. its_francesca
    Member
    Posted 7 months ago #

    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?

  17. Tareq
    Member
    Posted 7 months ago #

    No problem.

    I'll have a look into that for you!

  18. its_francesca
    Member
    Posted 7 months ago #

    Thank you :)

  19. Tareq
    Member
    Posted 7 months ago #

    Do define Quicksand globally, I think you could just do this:

    body {
        font-family: 'Quicksand', sans-serif;
    }
  20. its_francesca
    Member
    Posted 7 months ago #

    YOU ARE AMAZING, Thank youuu!!!

  21. Tareq
    Member
    Posted 7 months ago #

    No worries, if you need any further help, I've left myself subscribed to this topic so just ask and I'll be glad to assist.

    One other thing before I go; If you wanted to vary the font-weight i.e. bold/normal, you can do the following:

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

    400 is normal weight
    700 is bold weight

    and to change this in your css selectors, under font-family: 'Quicksand', sans-serif; add another line and enter font-weight: 700; (for example) which would then give you bold styling.

    Up to you!

  22. its_francesca
    Member
    Posted 7 months ago #

    Thank you so much, I'll have a play around with what looks good, you've been such a massive help.

    All the best! x

  23. Tareq
    Member
    Posted 7 months ago #

    No problem.

    And to you, just responded to one of your other support requests too!

Reply

You must log in to post.

About this Theme

About this Topic