Archived topic
Sub Menu Background Border Radius
5 replies · Started by Gerson on August 4, 2019
I've been trying to find the CSS code to give a radius to the background of the sub-menu but have not been able to. I used this code to change the border radius of the nav-menu. Also, there's a funny thing happening - when you hover over a menu item on the main nav-menu and then move away from that item, the border radius momentarily disappears exposing a perfect rectangle. Any idea why this might be happening?
.main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li:focus > a, .main-navigation .main-nav ul li.sfHover > a {
border-radius: 20px;
margin-bottom: 5px;
}
Hi there,
just apply the the border-radius to static element eg.
.main-navigation .main-nav ul li a {
This will apply to all states of the menu item so no transition between border and no-border will be visible.
Thanks David. That's fixed it. But could you please help me with the sub-menu? At the moment it looks like this: https://pasteboard.co/IrcxXiJ.png
I'd like the dark blue background to have a border radius and an internal margin so the sub-menu items sit inside it.
All good - got it working.
Thanks.
Glad to hear that