I'm setting up a newsite with the Salient theme and I have 2 issues:
1. The main menu have a 0.75opacity, and IDK where this come, and the hover color set in the "Header Font Hover" option, doesn't show. This it's really weird.
2. This issue it's driving me crazy. The submenu items have some hover background than I can't take over with any css, it's simply impossible.
I've found the path:
body #top .sf-menu li.menu-item-over.sfHover ul.sub-menu li a:hover{background-color:none !important;}
The second fix in "dropdown background hover" doesn't work, I've must use:
#header-outer:not([data-format="left-header"]) #top nav >ul >li:not(.megamenu) ul a:hover{background-color:unset !important;color:#14bf98 !important;}
This fix the issue.
The last problem now with menu it's with the hover in the menu item "Servicios" than make the "drop down" for the menu. This item remains withe instead the hover color for the rest of the buttons.
No one of the "Header Color Scheme" custom doesn't work, it's really weird.
Try the following custom css for hover color on menu items:
#header-outer.transparent[data-lhe="default"] #top nav > ul > li > a:hover, #header-outer.transparent[data-lhe="default"] #top nav > .sf-menu > li > a:hover {
color: red !important;
}
You need to turn off the "Permanent Transparent" Header Option for the hover to work on the 1st Level. Also, I Can seem to hover correctly on the submenus using Chrome are you using another browser?.
Tahir, inside the "submenu" the hover was solved ok with the code provided by Andrew a few days ago.
We need the Transparent Header Effect with the "Use Transparent Header When Applicable", the design must be in this way. With this option the hover in the primary menu doesn't work?
Now only the services menu does not highlight when i hover over its submenu. Add Below css to fix that.
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.sfHover > a > .sf-sub-indicator [class*=" icon-"],#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: #14bf98 !important;
}
Hello!
I'm setting up a newsite with the Salient theme and I have 2 issues:
1. The main menu have a 0.75opacity, and IDK where this come, and the hover color set in the "Header Font Hover" option, doesn't show. This it's really weird.
2. This issue it's driving me crazy. The submenu items have some hover background than I can't take over with any css, it's simply impossible.
I've found the path:
body #top .sf-menu li.menu-item-over.sfHover ul.sub-menu li a:hover{background-color:none !important;}
But doesn't work. I'm loosing my mind.
HELP!!!
Hi there,
Use the following custom css to remove opacity. Add in Salient > General settings > CSS/Script related:
#header-outer.transparent #top nav > ul > li > a, #header-outer.transparent #top nav > .sf-menu > li > a { opacity: 1; }Adjust the setting in Salient > Header navigation > Logo and general styling
Make sure custom is selected
Hope this helps.
Hey! First of all, tnx for the reply.
The first css fix for opacity works fine.
The second fix in "dropdown background hover" doesn't work, I've must use:
#header-outer:not([data-format="left-header"]) #top nav >ul >li:not(.megamenu) ul a:hover{background-color:unset !important;color:#14bf98 !important;}
This fix the issue.
The last problem now with menu it's with the hover in the menu item "Servicios" than make the "drop down" for the menu. This item remains withe instead the hover color for the rest of the buttons.
No one of the "Header Color Scheme" custom doesn't work, it's really weird.
How can I set up this from css? Tnx.-
Hi there,
Try the following custom css for hover color on menu items:
#header-outer.transparent[data-lhe="default"] #top nav > ul > li > a:hover, #header-outer.transparent[data-lhe="default"] #top nav > .sf-menu > li > a:hover { color: red !important; }Thanks.
Hello Andrew.
That doesn't work.
You can check actually here: https://vfs.com.ar/newSite/
The hover in the whole menu items works, except for the "servicios" who has the submenu option.
If you scroll down, when the menu reduce the height, the hover stop working for everything in the menu.
It's pretty weird, isn't?
Hey Again,
You need to turn off the "Permanent Transparent" Header Option for the hover to work on the 1st Level. Also, I Can seem to hover correctly on the submenus using Chrome are you using another browser?.
Thanks
ThemeNectar Support Team
Tahir, inside the "submenu" the hover was solved ok with the code provided by Andrew a few days ago.
We need the Transparent Header Effect with the "Use Transparent Header When Applicable", the design must be in this way. With this option the hover in the primary menu doesn't work?
It's really weird this...
Hey Again,
Now only the services menu does not highlight when i hover over its submenu. Add Below css to fix that.
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.sfHover > a > .sf-sub-indicator [class*=" icon-"],#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: #14bf98 !important; }Thanks
ThemeNectar Support Team
Perfect! All solved!
Tnx a lot.-