[Resolved] Some CSS tweaks needed if possible?

Home Forums Support [Resolved] Some CSS tweaks needed if possible?

Home Forums Support Some CSS tweaks needed if possible?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1603884
    Angus

    Hi guys,

    I’m in the process of rebuilding my current website (astra/elementor) with GPP and GB. I would like the links in the sticky header to retain the highlighted colour of the page the person is on. For example when on my current website if I’m on the Services page, the navigation link in the header is highlighted pink, the same as the normal navigation. And when the sticky header kicks in after scrolling back up the same Services link is pink.

    In the new (staging) site I’ve tried to have the sticky header/navigation act in the same way using this css

    .main-navigation.navigation-stick,
    .main-navigation.navigation-stick ul ul {
    background-color: #fff;
    }

    .main-navigation.navigation-stick .main-nav ul li a,
    .navigation-stick .menu-toggle {
    color: #000;
    }

    but the page I am on isn’t highlighted pink when the sticky header kicks in, it stays black. I’m pretty sure I am missing some css, could you help?

    #1603901
    David
    Staff
    Customer Support

    Hi there,

    the site you imported included some CSS in Customizer > Additional CSS – delete this part of the code so the Sticky nav will respect your customizer settings:

    .main-navigation.navigation-stick, .main-navigation.navigation-stick ul ul {
        background-color: #fff;
    }
    .main-navigation.navigation-stick .main-nav ul li a, .navigation-stick .menu-toggle {
        color: #000;
    }
    #1603938
    Angus

    Hi David, thanks for that! Perfect! Any idea how to change the colour of the custom button in header navigation?

    #1604198
    Ying
    Staff
    Customer Support

    Hi Angus,

    Try this CSS:

    .main-navigation:not(.slideout-navigation) .main-nav li.nav-button a {
        background-color: #ff2c74; /*switch it with the color you want*/
    }

    Let me know πŸ™‚

    #1612457
    Angus

    Hi Ying, thanks for that. That worked, but I can’t seem to get the hover colour to change, even using the same css class?

    #1612475
    Ying
    Staff
    Customer Support

    Hi Angus,

    Try this CSS to change the hover background color:

    .main-navigation:not(.slideout-navigation) .main-nav li.nav-button a:hover {
        background-color: #000000;
    }
    #1612484
    Angus

    Perfect, thank you Ying, you’re a genius!

    #1613416
    Ying
    Staff
    Customer Support

    Glad to hear that lol πŸ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.