Archived topic
Activating sticky navigation on primary navigation hover
3 replies · Started by Joona on May 3, 2021
I'm working on a transparent primary navbar with white link texts for a page with a switching image slider hero element. Some images are light in color and are making white navbar texts hard to read.
Initial idea was to change the transparent primary nav background to white and invert the text element colors on hover but I realise that the sticky nav already has the style I'm trying to get. Would it be possible to simply bring up the sticky nav (#sticky-navigation) on primary nav (#site-navigation) hover instead?
Example page with a navbar style what I'm trying to accomplish https://www.mainioclothing.fi/.
Hi Joona,
Sticky nav can't combine with primary nav, but you can set primary navigation background color to transparent, text color to white in customizer, and give this CSS a try:
nav#site-navigation:hover {
background-color: #fff;
transition: all 0.2s ease;
}
nav#site-navigation:hover .main-nav ul li a {
color: #515151;
}Btw your site is not visible.
Let me know :)
Ok, sorted this out with custom css, thank's for the starting point!
Good job :)
You are welcome!
