Hello. When someone rolls over a menu item in the header, I would like a color box to appear behind the menu item, and the text would need to reverse to white. Is this possible with CSS?
Also, when using the WP Menu element, there are no available options. Where can I remove the bullet icons? See second screenshot. Thank you.
When someone rolls over a menu item in the header, I would like a color box to appear behind the menu item, and the text would need to reverse to white. Is this possible with CSS?
Please select the option below. Then send in your website URL so that we can provide css to modify the colors:
Also, when using the WP Menu element, there are no available options. Where can I remove the bullet icons? See second screenshot.
Please send in your website URL so that we can provide css for this.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Hello. This code removed the line under the menu items. I had asked if it was possible to add a color box to appear behind the menu items when rolled over, and the text would need to reverse to white, like in the screenshot I sent named "Screen-Shot-2022-09-28-menu.png". The color of the rollover box would be #f07428. Thank you.
Hello. Thank you, but I don't think you are understanding my request. Please see the attached screenshot. I am hoping that on rollover, a #f07428 box will appear behind the menu text. Please see the attachment. Thank you.
#header-outer[data-lhe="default"] #top nav > ul > li > a:hover, #header-outer[data-lhe="default"] #top nav .sf-menu > .sfHover:not(#social-in-menu) > a, #header-outer[data-lhe="default"] #top nav .sf-menu > .current-menu-item > a, #header-outer[data-lhe="default"] #top nav .sf-menu > .current_page_ancestor > a, #header-outer[data-lhe="default"] #top nav .sf-menu > .current-menu-ancestor > a, #header-outer[data-lhe="default"] #top nav .sf-menu > .current_page_item > a, #header-outer[data-lhe="default"] #top nav > ul > .button_bordered > a:hover, #header-outer[data-lhe="default"] #top nav > .sf-menu > .button_bordered.sfHover > a, #header-outer:not(.transparent) .nectar-mobile-only.mobile-header a:hover, #header-outer:not(.transparent) .nectar-mobile-only.mobile-header li[class*="current"] a { background-color: #f07428; padding: 6px; }
Thank you. This is great. We're getting VERY close. The only issue I am seeing is that when each menu item is rolled over, the menu items are shifting left and right. Is there a way to correct this?
Actually, I was able to fix this last issue myself by changing the padding settings to the ones below. The left and right padding just needed to match the spacing settings between each menu item. So I think it looks perfect now. Thank you VERY much for your help!!
Hello. When someone rolls over a menu item in the header, I would like a color box to appear behind the menu item, and the text would need to reverse to white. Is this possible with CSS?
Also, when using the WP Menu element, there are no available options. Where can I remove the bullet icons? See second screenshot. Thank you.
Hello There,
Thanks for keeping in touch.
When someone rolls over a menu item in the header, I would like a color box to appear behind the menu item, and the text would need to reverse to white. Is this possible with CSS?
Please select the option below. Then send in your website URL so that we can provide css to modify the colors:
Also, when using the WP Menu element, there are no available options. Where can I remove the bullet icons? See second screenshot.
Please send in your website URL so that we can provide css for this.
Thanks.
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
ul#menu-home-menu li { list-style: none; }Thanks
ThemeNectar Support Team
Hello. This code removed the line under the menu items. I had asked if it was possible to add a color box to appear behind the menu items when rolled over, and the text would need to reverse to white, like in the screenshot I sent named "Screen-Shot-2022-09-28-menu.png". The color of the rollover box would be #f07428. Thank you.
Hello There,
I have set the colors from here:
Thanks.
Hello. Thank you, but I don't think you are understanding my request. Please see the attached screenshot. I am hoping that on rollover, a #f07428 box will appear behind the menu text. Please see the attachment. Thank you.
Hi There,
Please try this css:
#header-outer[data-lhe="default"] #top nav > ul > li > a:hover, #header-outer[data-lhe="default"] #top nav .sf-menu > .sfHover:not(#social-in-menu) > a, #header-outer[data-lhe="default"] #top nav .sf-menu > .current-menu-item > a, #header-outer[data-lhe="default"] #top nav .sf-menu > .current_page_ancestor > a, #header-outer[data-lhe="default"] #top nav .sf-menu > .current-menu-ancestor > a, #header-outer[data-lhe="default"] #top nav .sf-menu > .current_page_item > a, #header-outer[data-lhe="default"] #top nav > ul > .button_bordered > a:hover, #header-outer[data-lhe="default"] #top nav > .sf-menu > .button_bordered.sfHover > a, #header-outer:not(.transparent) .nectar-mobile-only.mobile-header a:hover, #header-outer:not(.transparent) .nectar-mobile-only.mobile-header li[class*="current"] a {background-color: #f07428;
padding: 6px;
}
Thanks.
Thank you. This is great. We're getting VERY close. The only issue I am seeing is that when each menu item is rolled over, the menu items are shifting left and right. Is there a way to correct this?
Actually, I was able to fix this last issue myself by changing the padding settings to the ones below. The left and right padding just needed to match the spacing settings between each menu item. So I think it looks perfect now. Thank you VERY much for your help!!