Round menu dropdown

Hi,

Is it possible to make default menu dropdown round, the same way buttons are? For PC version.

https://gyazo.com/4c46a43dbfbcbd7df1fd16720b00c059

Much thanks

Hello,

Yes, you can make default menu dropdown as rounded like button. To achieve this you need to define a custom CSS class in your menu first as in the below screenshot I declare “round” class in menu from Appearance >> Menus.

Screenshot for your satisfaction: https://jmp.sh/IfI1j9d

Then use the below CSS code in global custom CSS area under theme settings >> custom CSS:

.round .sub-menu-dropdown{
      border: 2px solid red;
      border-radius: 10px;
}

Result: https://jmp.sh/R0EOJPP

Best Regards.

Hi Aizaz,

Thanks for the solution. It worked for level one dropdown, however, it didn’t affect level two dropdown (Menu Item / Sub Menu Item / >Sub-Sub-Menu Item<).

What should I do to affect it as well?

Thank you.

Most Welcome :)

For the sub menus you have to assign the class to that specific menu item which have further sub menu items and add the class in prior code for rounded border.

Screenshot for specific item which contains further menu items: https://jmp.sh/mb78ir0

Assigning the class: https://jmp.sh/QuH52mq

The below CSS code you have to use in global custom CSS under theme settings >> custom CSS:

.round .sub-menu-dropdown, .round .sub-sub-menu {
 border: 2px solid red;
 border-radius: 10px;
}

Result: https://jmp.sh/Cx0lfd9

Best Regards.

Dear Aizaz,

This particular version of the code didn’t work for some reason, however, it started working after I separated it into two entities:

.round .sub-menu-dropdown{

      border: 1px solid white;

      border-radius: 5px;

}
	
.round .sub-sub-menu {

      border: 1px solid white;

      border-radius: 5px;

}

I am writing it down for other users information.

Thank you for your help.

Hello,

I have test the code and both versions worked for me. I’m glad that it works for you after seperation. Thanks for sharing the code it may help others.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts