Home>Support>Custom menu CSS?

Custom menu CSS?

Hi everybody,

I have a little question about Vantage theme. I have a sticky menu that works properly as I want when user scoll down the page, but it is different from the menu that appears when the page is loaded.
How can I customize this menu via CSS?

this is the URL: www.khappa.com

Thank you very much in advance,
cheers

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 1 month ago Max G. Khappa

    Is there a way to customize the default menu (not the sticky) via CSS?
    If I change class “”.main-navigation”” doesn’t do nothing.
    Any suggestions please?

  2. 8 years, 1 month ago Max G. Khappa

    any help please?

  3. 8 years, 1 month ago Max G. Khappa

    Guys please,

    do you know how can I customize menu via CSS?
    ‘.main-navigation’ class don’t do nothing in child theme.

  4. 8 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Hi Max

    The main menu gets a class of sticky when it becomes stuck. If you use your browser’s developer tool inspector you can see this happening. So to target the sticky menu you’d use:

    .site-navigation.sticky

    Here is more on Chrome devtools if you’d like to check that out: https://developers.google.com/web/tools/chrome-devtools/?hl=en

  5. 8 years, 1 month ago Max G. Khappa

    Hi Andrew and thank you very much for your reply!
    Well, im using this Chrome tool already. About “.site-navigation.sticky” that is the class I customized and it works fine when I scroll down but once the site is just loaded it shows me another manu bar.

    What can i do?

  6. 8 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Yes, that’s correct, .site-navigation.sticky only applies once the menu bar goes sticky, before that, only .site-navigation is in effect. Using Chrome dev tools you can see the sticky class being added and removed.

  7. 8 years, 1 month ago Max G. Khappa

    Nothing to do Andrew…

    I tried to use

    .site-navigation

    and

    .site-navigation.sticky

    , but nothing. Once a load the page I have my menu without opacity and shadow and once I scroll down the page it change into he sticky menu.
    I wanna get the same menu at the beginning you know?

    The problem is: .sticky-navigation doesn’t do nothing.

  8. 8 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Thanks for your feedback. Are you using your developer tool to inspect the problem? Click on the menu when it is as the top of the page, you’ll see that .main-navigation has specificity over .site-navigation. So if you change your rule from .site-navigation to .site-navigation.main-navigation you will increase the specificity of your custom rule and win the battle.

    specificity

  9. 8 years, 1 month ago Max G. Khappa

    You’re right bro!!
    Now its working… thank you so much Andrew.
    It is nothing really matter but you know, it’s the menu bar, everybody may come to my site has to use it.
    Thank you Andrew.

  10. 8 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Awesome :) Glad to hear you were able to resolve. All the best.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More