WordPress.org

Forums

Vantage
[resolved] Center Nav on Vantage Premium theme (17 posts)

  1. ninaberyl
    Member
    Posted 1 year ago #

    I want to center the nav menu on the Vantage Premium theme. I tried adding the following custom css:

    body.responsive.layout-full #page-wrapper .full-container {
        display: table;

    This did indeed center the nav menu, but it unfortunately also caused the four column row beneath the image slider to become squished together horizontally.

    Is there a better way to center the nav menu?

    My site is temporarily at:

  2. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    See if you can use any techniques discussed here: http://www.w3.org/Style/Examples/007/center.en.html

  3. ninaberyl
    Member
    Posted 1 year ago #

    Thanks Andrew.
    The solutions listed an that article don't seem to apply.
    I don't see a fixed-width element to center.
    I am new to all this, though, and I might just be missing something obvious.

  4. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    Let's see your site

  5. ninaberyl
    Member
    Posted 1 year ago #

  6. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    .main-navigation ul {
     display: inline-block;
    }
  7. ninaberyl
    Member
    Posted 1 year ago #

    That didn't fix it :(

  8. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    Forgot, you need this bit too:

    #masthead {
     text-align: center;
    }
  9. ninaberyl
    Member
    Posted 1 year ago #

    Thank you so much!
    The good news is, your code fixed this issue for me.
    The bad news is, I don't really understand why.
    Can you enlighten me?

  10. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    The text-align style works for 'inline' and 'inline-block' elements.
    Previously your menu's <ul> element was displayed 'block'.

    So what you've now done is just used text-align: center; on everything inside of the #masthead (the header).

  11. ninaberyl
    Member
    Posted 1 year ago #

    Thanks again. Much appreciated!!!!

  12. Fwe34000
    Member
    Posted 1 year ago #

    Hello!

    Thank you for your advice, I did it and it works well but still I have a little problem:

    Go on my website: http://vitamine-design.fr/

    OnMouseOver on the "Accueil" button, I have a little space between the blue box and the end of the menu.

    (I hope you'll see what I mean!)

    I tried to change many things in the style.css but didn't find the answer...

    If you can help me!

    Thx!

    F.

  13. superbanana
    Member
    Posted 1 year ago #

    I'm not sure if this is the right way to do it, but you can try this:

    .site-navigation.main-navigation.primary.use-sticky-menu {
    height: 59px;
    }
  14. Fwe34000
    Member
    Posted 1 year ago #

    Thx Superbanana! It works! It's maybe not the best way but it's good like that :)

    I have an other problem: on my iPad, the picture field is not in the good alignement:

    Exemple

    I don't really know how to do to put it in the right place!

    Any idea?

  15. Fwe34000
    Member
    Posted 1 year ago #

    Thx Superbanana! It works! It's maybe not the best way but it's good like that :)

    I have an other problem: on my iPad, the picture field is not in the good alignement:

    Exemple

    I don't really know how to do to put it in the right place!

    Any idea?

  16. svanboeyen
    Member
    Posted 8 months ago #

    @superbanana

    I entered everything into the CSS that you previously posted. It works for everything except my search bar. Any suggestions?

    http://greencaremedicalclinic.ca/

    Thanks

  17. svanboeyen
    Member
    Posted 8 months ago #

    Found this code from the siteorigin website:

    .main-navigation ul {
    text-align: center;
    }

    .main-navigation ul li {
    display: inline-block;
    float: none;
    }

    Enter it into Vantage Custom CSS or the Editor if you're using a child theme. (If you enter this into editor and aren't using a child theme it will be erased after updating Vantage)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags