Customise Categories button on the header

This topic has 7 replies, 2 voices, and was last updated 55 minutes ago by Ram Hegde.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
December 24, 2024 at 5:13 pm #625146

Ram Hegde
Participant

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.

December 24, 2024 at 5:20 pm #625149

Ram Hegde
Participant

The screenshot

Attachments:
You must be logged in to view attached files.

December 26, 2024 at 10:57 am #625418

Hung Pham
Keymaster

Hi kaigalmane,

Thanks for reaching to us.

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

Regards,

December 26, 2024 at 11:08 am #625427

Ram Hegde
Participant

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.

December 27, 2024 at 9:34 am #625611
Hung Pham
Keymaster
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,
December 27, 2024 at 12:00 pm #625650

Ram Hegde
Participant

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.

December 27, 2024 at 2:06 pm #625707
Hung Pham
Keymaster
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,
December 27, 2024 at 2:57 pm #625721

Ram Hegde
Participant

Still same. It didn’t change anything.
Author

Posts