I don't seem to be able to change the Hover Color of my Navigation Menu using the transparent header. It works fine on pages without transparent header, but on this particular one, font colour (white) is just enhanced.
I can't code, so if there is any way to do it through the settings that would be great. Otherwise I would need some more guidance.
I already changed the font and hover colours there, and it works fine for the navigation menu, when the header is not transparent. But when the header is transparent (only the Home page right now) it doesn't work. When I go to the options "transparent header effect" I can only set the font colour (white, wich works), but I can not choose a hover colour.
Is there any other way? I guess I could also insert some code in the Custom CSS Code field. What would I have to do here?
Adding custom css would be quite troublesome as if you are using a Transparent Header the content below could be of the same color and result in your menu being hidden.
That is default color behavior of the Transparent Header . Its white with a .75 opacity so the text shows on any background color that may get added . If you want to change that please provide the page url so that i can write up the custom css for whats possible.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
#header-outer.transparent[data-lhe="default"].dark-slide #top nav .sf-menu > .current_page_item > a,#header-outer.transparent.dark-slide > #top nav .sf-menu > .current-menu-item > a,#header-outer.transparent.dark-slide > #top nav .sf-menu > .current_page_item > a {
color: #87d221 !important;
opacity: 1 !important;
}
thank you very much! This didn't exactly work as I wanted. With the Custom CSS the page I am on is now highlited in the green color, which is great, but the other menu items don't turn green when I go over them with the cursor (as it is with the non-transparent header). Can you help with that too?
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
#header-outer.transparent.dark-slide > #top nav > ul > li > a:hover, #header-outer.transparent.dark-slide > #top nav .sf-menu > .sfHover > a, #header-outer.transparent.dark-slide > #top nav .sf-menu > .current_page_ancestor > a, #header-outer.transparent.dark-slide > #top nav .sf-menu > .current-menu-item > a, #header-outer.transparent.dark-slide > #top nav .sf-menu > .current-menu-ancestor > a, #header-outer.transparent.dark-slide > #top nav .sf-menu > .current_page_item > a, #header-outer.transparent.dark-slide > #top nav > ul > li > a:hover > .sf-sub-indicator > i, #header-outer.transparent.dark-slide > #top nav > ul > .sfHover > a > span > i, #header-outer.transparent.dark-slide > #top nav ul #search-btn a:hover span, #header-outer.transparent.dark-slide > #top nav ul #nectar-user-account a:hover span, body #header-outer.dark-slide.transparent[data-lhe="default"] #top nav .sf-menu > .current_page_item > a .sf-sub-indicator i, #header-outer.transparent.dark-slide > #top nav .sf-menu > .current-menu-item > a i, #header-outer.transparent.dark-slide > #top nav .sf-menu > .current-menu-ancestor > a i, body #header-outer.dark-slide.transparent[data-lhe="default"] #top nav .sf-menu > .current-menu-ancestor > a i, #header-outer.transparent.dark-slide > #top .cart-outer:hover .icon-salient-cart, body.ascend[data-header-color="custom"] #boxed #header-outer.transparent.dark-slide > #top .cart-outer:hover .cart-menu .cart-icon-wrap i, #header-outer.transparent.dark-slide > #top #logo, #header-outer.transparent[data-lhe="default"].dark-slide #top nav .sf-menu > .current_page_item > a, #header-outer.transparent[data-lhe="default"].dark-slide #top nav .sf-menu > .current-menu-ancestor > a, #header-outer.transparent[data-lhe="default"].dark-slide #top nav > ul > li > a:hover, #header-outer.transparent[data-lhe="default"].dark-slide #top nav .sf-menu > .sfHover:not(#social-in-menu) > a, #header-outer.transparent.dark-slide #top nav > ul > .sfHover > a > span > i, body.ascend[data-header-color="custom"] #boxed #header-outer.transparent.dark-slide > #top .cart-outer:hover .cart-menu .cart-icon-wrap i, .swiper-wrapper .swiper-slide[data-color-scheme="dark"] .slider-down-arrow i.icon-default-style[class^="icon-"], .slider-prev.dark-cs i, .slider-next.dark-cs i, .swiper-container .dark-cs.slider-prev .slide-count span, .swiper-container .dark-cs.slider-next .slide-count span {
color: #87d221 !important;
}
Hello,
I don't seem to be able to change the Hover Color of my Navigation Menu using the transparent header. It works fine on pages without transparent header, but on this particular one, font colour (white) is just enhanced.
I can't code, so if there is any way to do it through the settings that would be great. Otherwise I would need some more guidance.
Thanks a lot!
Thank you for the quick reply!
I already changed the font and hover colours there, and it works fine for the navigation menu, when the header is not transparent. But when the header is transparent (only the Home page right now) it doesn't work. When I go to the options "transparent header effect" I can only set the font colour (white, wich works), but I can not choose a hover colour.
Is there any other way? I guess I could also insert some code in the Custom CSS Code field. What would I have to do here?
Thanks for your help :)
Hi AFontaine11,
Share url to your website so that we see possible custom css.
Thanks.
The Website is in Coming-Soon-Mode right now. So how can I show you the Pages I am talking abou?
Hey Again,
Yes thats correct if you choose a transparent header the Custom color options wont apply and a semi transparent menu is shown .
Thanks
ThemeNectar Support Team
Ok,
So, does it not work at all? Is there no way to make the hover color work? Or can I use a custom CSS and just insert the colour codes?
Adding custom css would be quite troublesome as if you are using a Transparent Header the content below could be of the same color and result in your menu being hidden.
Thanks
ThemeNectar Support Team
Hey Again,
That is default color behavior of the Transparent Header . Its white with a .75 opacity so the text shows on any background color that may get added . If you want to change that please provide the page url so that i can write up the custom css for whats possible.
Thanks
ThemeNectar Support Team
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
#header-outer.transparent[data-lhe="default"].dark-slide #top nav .sf-menu > .current_page_item > a,#header-outer.transparent.dark-slide > #top nav .sf-menu > .current-menu-item > a,#header-outer.transparent.dark-slide > #top nav .sf-menu > .current_page_item > a { color: #87d221 !important; opacity: 1 !important; }Thanks
ThemeNectar Support Team
Hello,
thank you very much! This didn't exactly work as I wanted. With the Custom CSS the page I am on is now highlited in the green color, which is great, but the other menu items don't turn green when I go over them with the cursor (as it is with the non-transparent header). Can you help with that too?
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
#header-outer.transparent.dark-slide > #top nav > ul > li > a:hover, #header-outer.transparent.dark-slide > #top nav .sf-menu > .sfHover > a, #header-outer.transparent.dark-slide > #top nav .sf-menu > .current_page_ancestor > a, #header-outer.transparent.dark-slide > #top nav .sf-menu > .current-menu-item > a, #header-outer.transparent.dark-slide > #top nav .sf-menu > .current-menu-ancestor > a, #header-outer.transparent.dark-slide > #top nav .sf-menu > .current_page_item > a, #header-outer.transparent.dark-slide > #top nav > ul > li > a:hover > .sf-sub-indicator > i, #header-outer.transparent.dark-slide > #top nav > ul > .sfHover > a > span > i, #header-outer.transparent.dark-slide > #top nav ul #search-btn a:hover span, #header-outer.transparent.dark-slide > #top nav ul #nectar-user-account a:hover span, body #header-outer.dark-slide.transparent[data-lhe="default"] #top nav .sf-menu > .current_page_item > a .sf-sub-indicator i, #header-outer.transparent.dark-slide > #top nav .sf-menu > .current-menu-item > a i, #header-outer.transparent.dark-slide > #top nav .sf-menu > .current-menu-ancestor > a i, body #header-outer.dark-slide.transparent[data-lhe="default"] #top nav .sf-menu > .current-menu-ancestor > a i, #header-outer.transparent.dark-slide > #top .cart-outer:hover .icon-salient-cart, body.ascend[data-header-color="custom"] #boxed #header-outer.transparent.dark-slide > #top .cart-outer:hover .cart-menu .cart-icon-wrap i, #header-outer.transparent.dark-slide > #top #logo, #header-outer.transparent[data-lhe="default"].dark-slide #top nav .sf-menu > .current_page_item > a, #header-outer.transparent[data-lhe="default"].dark-slide #top nav .sf-menu > .current-menu-ancestor > a, #header-outer.transparent[data-lhe="default"].dark-slide #top nav > ul > li > a:hover, #header-outer.transparent[data-lhe="default"].dark-slide #top nav .sf-menu > .sfHover:not(#social-in-menu) > a, #header-outer.transparent.dark-slide #top nav > ul > .sfHover > a > span > i, body.ascend[data-header-color="custom"] #boxed #header-outer.transparent.dark-slide > #top .cart-outer:hover .cart-menu .cart-icon-wrap i, .swiper-wrapper .swiper-slide[data-color-scheme="dark"] .slider-down-arrow i.icon-default-style[class^="icon-"], .slider-prev.dark-cs i, .slider-next.dark-cs i, .swiper-container .dark-cs.slider-prev .slide-count span, .swiper-container .dark-cs.slider-next .slide-count span { color: #87d221 !important; }Thanks
ThemeNectar Support Team
Now it works perfectly! Thank you so much!