I wish to change the color of the hamburger via HOVER in the transparency nav bar upon page load before scroll. The hamburger changes color afer scrolling, but remains the same color in the initial page load header.
What is the CSS to change the hover color of the hamburger in the heaer upon page load before the scroll?
Hey , Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
@media only screen and (min-width: 1000px) {
#header-outer.transparent header#top nav ul .slide-out-widget-area-toggle a:hover span {
color: #ffc155 !important;
}
}
#header-outer.transparent:not(.directional-nav-effect) > header#top nav ul .slide-out-widget-area-toggle a:hover i.lines, #header-outer.transparent:not(.directional-nav-effect) > header#top nav ul .slide-out-widget-area-toggle a:hover i.lines:before, #header-outer.transparent:not(.directional-nav-effect) > header#top nav ul .slide-out-widget-area-toggle a:hover i.lines:after, #header-outer.transparent.directional-nav-effect > header#top nav ul .slide-out-widget-area-toggle a:hover span.light .lines-button i, #header-outer.transparent.directional-nav-effect > header#top nav ul .slide-out-widget-area-toggle a:hover span.light .lines-button i:after, #header-outer.transparent.directional-nav-effect > header#top nav ul .slide-out-widget-area-toggle a:hover span.light .lines-button i:before, #header-outer.transparent:not(.directional-nav-effect) .midnightHeader.nectar-slider header#top nav ul .slide-out-widget-area-toggle a:hover i.lines, #header-outer.transparent:not(.directional-nav-effect) .midnightHeader.nectar-slider header#top nav ul .slide-out-widget-area-toggle a:hover i.lines:before, #header-outer.transparent:not(.directional-nav-effect) .midnightHeader.nectar-slider header#top nav ul .slide-out-widget-area-toggle a:hover i.lines:after, #header-outer.transparent.directional-nav-effect .midnightHeader.nectar-slider header#top nav ul .slide-out-widget-area-toggle a:hover span.light .lines-button i, #header-outer.transparent.directional-nav-effect .midnightHeader.nectar-slider header#top nav ul .slide-out-widget-area-toggle a:hover span.light .lines-button i:after, #header-outer.transparent.directional-nav-effect .midnightHeader.nectar-slider header#top nav ul .slide-out-widget-area-toggle a:hover span.light .lines-button i:before {
background-color: #ffc155 !important;
}
I wish to change the color of the hamburger via HOVER in the transparency nav bar upon page load before scroll. The hamburger changes color afer scrolling, but remains the same color in the initial page load header.
What is the CSS to change the hover color of the hamburger in the heaer upon page load before the scroll?
thank you.
Hey ,
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
@media only screen and (min-width: 1000px) { #header-outer.transparent header#top nav ul .slide-out-widget-area-toggle a:hover span { color: #ffc155 !important; } } #header-outer.transparent:not(.directional-nav-effect) > header#top nav ul .slide-out-widget-area-toggle a:hover i.lines, #header-outer.transparent:not(.directional-nav-effect) > header#top nav ul .slide-out-widget-area-toggle a:hover i.lines:before, #header-outer.transparent:not(.directional-nav-effect) > header#top nav ul .slide-out-widget-area-toggle a:hover i.lines:after, #header-outer.transparent.directional-nav-effect > header#top nav ul .slide-out-widget-area-toggle a:hover span.light .lines-button i, #header-outer.transparent.directional-nav-effect > header#top nav ul .slide-out-widget-area-toggle a:hover span.light .lines-button i:after, #header-outer.transparent.directional-nav-effect > header#top nav ul .slide-out-widget-area-toggle a:hover span.light .lines-button i:before, #header-outer.transparent:not(.directional-nav-effect) .midnightHeader.nectar-slider header#top nav ul .slide-out-widget-area-toggle a:hover i.lines, #header-outer.transparent:not(.directional-nav-effect) .midnightHeader.nectar-slider header#top nav ul .slide-out-widget-area-toggle a:hover i.lines:before, #header-outer.transparent:not(.directional-nav-effect) .midnightHeader.nectar-slider header#top nav ul .slide-out-widget-area-toggle a:hover i.lines:after, #header-outer.transparent.directional-nav-effect .midnightHeader.nectar-slider header#top nav ul .slide-out-widget-area-toggle a:hover span.light .lines-button i, #header-outer.transparent.directional-nav-effect .midnightHeader.nectar-slider header#top nav ul .slide-out-widget-area-toggle a:hover span.light .lines-button i:after, #header-outer.transparent.directional-nav-effect .midnightHeader.nectar-slider header#top nav ul .slide-out-widget-area-toggle a:hover span.light .lines-button i:before { background-color: #ffc155 !important; }Bes.t
ThemeNectar Support Team