Specific rounded corners

Support
#1

Hi there, I am attempting to round the corners of my Ubermenu menu but I want to round only the bottom corners, whilst leaving the top corners standard.

.ubermenu-nav .ubermenu-submenu {
border-radius: 5px;
}

I have used this and it changes both top and bottom. Any ideas?

#2

Hi @thurlowjp,

Thanks for writing.

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3
Summary

Hi Nico, thanks for the swift response. Here is my site;
https://www.casinoquo.com/

#4

Hi,

You can try this code instead.


.ubermenu-nav .ubermenu-submenu {
     -webkit-border-radius: 0 0 5px 5px;
     -moz-border-radius: 0 0 5px 5px;
      border-radius: 0 0 5px 5px;
}

For more information, you may refer to the link below.

Hope that help

#5

Hi Paul, that is great. Thanks for your help, but could you please assist in another related matter? I would like the menu to drop down from the bottom of the nav bar/header rather than the base of the top level menu items… I cannot find a solution for this. Thanks!

#6

Hey there,

Try adding the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.ubermenu-main {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.x-navbar-inner, .x-navbar-wrap {
    min-height: 53px !important;
    height: auto !important;
}
.ubermenu.ubermenu-main .ubermenu-item-level-0 {
    margin: 0 6px !important;
}

Let us know how this goes!