Navigation Menu with Border Radius

Hey MLA18,

I’m not sure I understand what you mean b the navigation menu, do you mean the mobile menu? If so then do you want to apply border radius to the flyout container?

Best regards,
Rikard

Hey,

Please add following code to bottom of Quick CSS field in Appearance > Editor

.html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll #av-burger-menu-ul a:hover {
    border-radius: 100px;
}

Regards,
Yigit

Hi,

Please use following code instead

#top .av-main-nav ul ul, .av-main-nav > li > ul { background: transparent!important; border-top: none; }
.av-main-nav ul li a { border-radius: 100px; }

It should look like this – https://imgur.com/a/G2ehsXG :)

Best regards,
Yigit

Hi,

Please try switching the code to following one

#top .av-main-nav ul ul, .av-main-nav > li > ul { background: transparent!important; border-top: none; }
.av-main-nav ul li:first-child a {     border-top-left-radius: 100px;     border-top-right-radius: 100px; }
.av-main-nav ul li:last-child a {     border-bottom-left-radius: 100px;     border-bottom-right-radius: 100px; }

Best regards,
Yigit

Hi,

I changed the code to following one and that did it :)

.av-main-nav ul > li:first-child > a { border-top-left-radius: 6px; 
border-top-right-radius: 6px;}

.av-main-nav ul > li:last-child > a {border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;}

Best regards,
Yigit

Hi,

Your menu looks really nice :)
You are welcome! Let us know if you have any other questions or issues.

Best regards,
Yigit