Customise Categories button on the header

I am trying to replace Sticky navigation with the Categories mega menu. It works fine, but I am unable to find an option to customize the button. Check the screenshot below. I want to have the same-styled button for the Categories menu with all rounded corners instead of only top rounded corners.

Please help.

The screenshot

Attachments:

You must be logged in to view attached files.

Hi kaigalmane,

Thanks for reaching to us.

Please provide URL of the mentioned page, so I can take a closer look.

Regards,

I am making changes continuously so the page looks different now. However, to replicate it, apply the Vegetables prebuilt website and add the categories element to the Main header.

Also, let me know how I can adjust the width of that dropdown button.

Hi kaigalmane,

You can use the below custom CSS code and paste it to the Theme Settings > Custom CSS > Global CSS section:

.wd-header-cats.wd-style-1 span.menu-opener {
    border-radius: 42px;
	min-width: auto;
}

.wd-header-cats.wd-style-1 span.menu-opener:after{
	margin-left: 10px;
}

Regards,

That works. Can you also help me make the top corners of the dropdown menu rounded? I need to make them rounded just like bottom corners. Check the screenshot.

Attachments:

You must be logged in to view attached files.

Hi kaigalmane,

Please use below code:

div.wd-dropdown-cats{
    border-top-left-radius: var(--wd-brd-radius);
    border-top-right-radius: var(--wd-brd-radius);
}

Regards,

Still same. It didn’t change anything.

Hi kaigalmane,

Thanks for your patience.

Please remove above code and use below code:

div.wd-dropdown-cats,
div.wd-dropdown-cats .wd-nav-vertical{
    border-top-left-radius: var(--wd-brd-radius);
    border-top-right-radius: var(--wd-brd-radius);
}

Regards,

I used the Menu element with the “Aside” option and it looks much better now.

Hi kaigalmane,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

Regards,

[Author]

Posts