Archived topic
Some CSS tweaks needed if possible?
7 replies · Started by Angus on January 3, 2021
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?
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;
}Hi David, thanks for that! Perfect! Any idea how to change the colour of the custom button in header navigation?
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 :)
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?
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;
}Perfect, thank you Ying, you're a genius!
Glad to hear that lol :)
