This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Custom menu CSS?

Resolved 10 replies technicalthemetheme-vantage
Max G. Khappa
9 years ago · Last reply by Andrew Misplon 9 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

10
  1. Max G. Khappa 9 years, 6 months ago

    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. Max G. Khappa 9 years, 6 months ago

    any help please?

  3. Max G. Khappa 9 years, 6 months ago

    Guys please,

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

  4. Andrew Misplon Staff 9 years, 6 months ago

    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. Max G. Khappa 9 years, 6 months ago

    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. Andrew Misplon Staff 9 years, 6 months ago

    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. Max G. Khappa 9 years, 6 months ago

    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. Andrew Misplon Staff 9 years, 6 months ago

    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. Max G. Khappa 9 years, 6 months ago

    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. Andrew Misplon Staff 9 years, 6 months ago

    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.

Have a different question or issue?

Start New Thread