Site logo

Archived topic

Sub Menu Background Border Radius

5 replies · Started by Gerson on August 4, 2019

Viewing posts 1–6 of 6

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

This archived topic is closed to new replies.