Remove transition from rounded corners

Support
#1

Hi there, on my submenu I have added a radius to the corners of the submenu items, I have also added a transition to all hovering and current items. I do not want there to be a transition from square corners to rounded corners, which is currently the case. Aditionally, I do not know why current items do not have rounded corners, even though I have added it to the CSS Could I please have some help with these two issues?

#2

Here is the CSS that I have added for the transition;

.x-navbar {box-shadow: 0px 4px 10px #848484;}
.ubermenu.ubermenu-main .ubermenu-item-level-0:hover > .ubermenu-target, .ubermenu-main .ubermenu-item-level-0.ubermenu-active > .ubermenu-target {
	transition: all 1s;
}
.ubermenu-skin-black-white-2 .ubermenu-submenu .ubermenu-target:hover, 
.ubermenu-skin-black-white-2 .ubermenu-submenu .ubermenu-active > .ubermenu-target {
    transition: all .75s;
}

Here is the CSS I have added for the rounded corners;

.ubermenu-skin-black-white-2 .ubermenu-submenu .ubermenu-target:hover, 
.ubermenu-skin-black-white-2 .ubermenu-submenu .ubermenu-active > .ubermenu-target {
-webkit-border-radius: 5px 5px 5px 5px;
      border-radius: 5px 5px 5px 5px;
}
.ubermenu-skin-black-white-2 .ubermenu-submenu .ubermenu-target:active, 
.ubermenu-skin-black-white-2 .ubermenu-submenu .ubermenu-active > .ubermenu-target {
-webkit-border-radius: 5px 5px 5px 5px;
      border-radius: 5px 5px 5px 5px;
}
.ubermenu-skin-black-white-2 .ubermenu-submenu .ubermenu-target:current, 
.ubermenu-skin-black-white-2 .ubermenu-submenu .ubermenu-active > .ubermenu-target {
-webkit-border-radius: 5px 5px 5px 5px;
      border-radius: 5px 5px 5px 5px;
}
#3

Hello There,

Thank you for the very detailed post information. To resolve you issue, please change the line in your css:

transition: all 1s;

And make use of this line instead:

transition: background 1s ease;

We would loved to know if this has work for you. Thank you.

#4

Hey RueNel!

Unfortunately this did not work. Do you have any other solutions? Also, when I am on a current item, I just noticed that the submenu item does not have rounded corners. Could you please let me know why this is happening as well? Thanks!

#5

Hello There,

Thanks for updating in! The background color transparency works. You just don’t notice it because you will get distracted with the yellow border. The border should been there already but transparent and upon hovering, the yellow border should display. Unlike what you have right now that it changes the layout. You should make use of this code:

.ubermenu-main .ubermenu-submenu .ubermenu-item-header > .ubermenu-target,
.ubermenu-main .ubermenu-submenu .ubermenu-item-header > .ubermenu-target,
.ubermenu-skin-black-white-2 .ubermenu-submenu .ubermenu-target,
.ubermenu-skin-black-white-2 .ubermenu-submenu .ubermenu-active > .ubermenu-target {
  border: solid 1.5px transparent;
}

.ubermenu-skin-black-white-2 .ubermenu-submenu .ubermenu-target:hover,
.ubermenu-skin-black-white-2 .ubermenu-submenu .ubermenu-active > .ubermenu-target {
  border-color:#ffdc00;
  transition: background border .75s ease;
}

Hope this helps. Kindly let us know.