[Resolved] Sub Menu Background Border Radius

Home Forums Support Sub Menu Background Border Radius

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #975292
    Gerson

    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;
    }
    #975322
    David
    Staff
    Customer Support

    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.

    #975724
    Gerson

    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.

    #975734
    Gerson

    All good – got it working.

    #975735
    Gerson

    Thanks.

    #975828
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.