Mega menu customization

Hello,
I’m trying to remove the white margin around the mega menu (created by html blocks) as per attached image, but nothing works.
also I’m facing a problem in changing the menu background color on hover, I tried using custom css but it does not affect the mega menu
where can I change the font and the border of the mega menu

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Please provide your site admin access to the private area.

Please give me the screen of what you want to change I will give the correct CSS code.

Best Regards

Thanks,
the following are the desired changes as per attached image:
-the text in the main menu (on hover) to be with #dee8ef background color, border radius 20px, and no change in font color
-the mega menu with no white padding, with border radius 50px from the bottom
-maga menu text to be underlined, with #dee8ef background color on hover

also the mega menu appears only when we are logged in, we want it to be always visible

Attachments:

You must be logged in to view attached files.

Hello,

Your site is not reachable now. Please let me know when it works, I will check and give custom CSS.

Best Regards

the site

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .wd-dropdown-menu.wd-design-sized{
padding:0;
}

Best Regards

hello,
thank you, the code resolved the margin issue.
but there is another problem in the mega menu, some of the mega menu items have subcategories, that need to appear in the middle column(as per attached image); I’m not sure what is the best way to do this, (theoretically I think the submenu could be done as another mega menu widget that is only displayed when you hover on the category item, but I don’t know how to translate that into code)

Attachments:

You must be logged in to view attached files.

Hello,

You can realize that by means of the Browse Categories mega menu: https://gyazo.com/43ba1b9bed0d06a757217d3b8a9478df you can find instruction on how to do that here: https://xtemos.com/docs/woodmart/product-category-menu/

Best Regards

Hi,

Thank you for your reply.
We ended up using an HTML block for each children category in the menu. the problem now is that on smaller desktop screens the children’s categories float to the left and are blocking their parent categories. we tried to add custom CSS to make them appear on the right side of their parent categories but it did not work. please see the attached photo.

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

You will have to hide the blocks in mobile and create another one under or elsewhere, this is the only way out.

Best Regards

[Author]

Posts