Alrighty so I have a transparent primary nav using nav as header. I’ve managed to style the sticky nav separately with some custom CSS like so:
.main-navigation.navigation-clone {
background-image: linear-gradient(to right, #005d68, #007b7f, #009a8f, #2db99a, #5cd89f);
}
and
.main-navigation.sticky-navigation-transition .main-nav > ul > li > a, .sticky-navigation-transition .menu-toggle, .main-navigation.sticky-navigation-transition .mobile-bar-items a, .sticky-navigation-transition .navigation-branding .main-title {
color: white;
}
.main-navigation.sticky-navigation-transition .main-nav > ul > li > a:hover , .sticky-navigation-transition .menu-toggle, .main-navigation.sticky-navigation-transition .mobile-bar-items a, .sticky-navigation-transition .navigation-branding .main-title{
color: #005D68 ;
}
The issue though is that the logo doesn’t show well over the gradient so it’s hidden on desktop. But I can’t hide it from tablet and mobile only on the sticky nav. In other words. On tablet/mobile I’d like the logo to show on normal but hide on sticky.
I’d also like to change the text colour of the mobile toggle and label on the mobile/tablet sticky.
Does anyone have a suggestion on how to pull that off.