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):
#header-outer:not([data-format="left-header"]) #top nav >ul >li:not(.megamenu) ul a:hover,#header-outer #top nav > ul > .megamenu > ul ul li a:hover {
border-radius: 10px !important;
}
In trying to understand your code, I just used copied this snippet to see what happens:
.megamenu > ul ul li a:hover { border-radius: 10px !important;
}
That still performs the hover border radius I was wanting. What is the function of those not statements in your full code?
In addition, I'd like to compliment you & your team: you've not only helped me actualize the website I desire - but have really helped me learn CSS along the way. Salient is amazing. But the tools I'm learning through these interactions are truly transforming my understanding of web design. So thank you - thank you so much.
Ah - one other thing. I'd like that border radius to also apply to the current page. If I hover over that item in the megamenu, the hover becomes curved. But as it is, the current selection background does not have a border radius until I hover over it.
To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:
From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:
#top .sf-menu li ul li a, #header-secondary-outer nav > ul > li > a, #header-secondary-outer .sf-menu li ul li a, #header-secondary-outer ul ul li a, #header-outer .widget_shopping_cart .cart_list a, .nectar-slide-in-cart.style_slide_in_click .close-cart {
border-radius: 8px !important;
}
Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related.
If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
Hey there,
I'd like to add a border radius to the hover state of my menu dropdown items. Could you suggest some CSS for that?
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):
#header-outer:not([data-format="left-header"]) #top nav >ul >li:not(.megamenu) ul a:hover,#header-outer #top nav > ul > .megamenu > ul ul li a:hover { border-radius: 10px !important; }Thanks
ThemeNectar Support Team
Thank you - that works.
In trying to understand your code, I just used copied this snippet to see what happens:
.megamenu > ul ul li a:hover { border-radius: 10px !important; }That still performs the hover border radius I was wanting. What is the function of those not statements in your full code?
In addition, I'd like to compliment you & your team: you've not only helped me actualize the website I desire - but have really helped me learn CSS along the way. Salient is amazing. But the tools I'm learning through these interactions are truly transforming my understanding of web design. So thank you - thank you so much.
Ah - one other thing. I'd like that border radius to also apply to the current page. If I hover over that item in the megamenu, the hover becomes curved. But as it is, the current selection background does not have a border radius until I hover over it.
Hello there,
Thanks for writing back.
To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:
From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:
#top .sf-menu li ul li a, #header-secondary-outer nav > ul > li > a, #header-secondary-outer .sf-menu li ul li a, #header-secondary-outer ul ul li a, #header-outer .widget_shopping_cart .cart_list a, .nectar-slide-in-cart.style_slide_in_click .close-cart { border-radius: 8px !important; }Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related.
If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
Yes that solves it. Thank you.