mega menu css

Hi, I need to know how I can define a unique background colour for the aside menu item selected and for the whole background in the sub-menu area. Look at the image attached.
basically, I’d like to define different background colours for each of the left menu item, that includes also the sub-menu area on the right.

Besides, I’d like to reduce the vertical spacing between the sub-menu otems. how can I do?
thank you

Attachments:

You must be logged in to view attached files.

Hello,

1. The background for the menu you can change via WoodMart -> Header builder -> Categories.

https://prnt.sc/3cfOkbqvEo8L

https://prnt.sc/0NkwR1gQsFM9

2. In order to reduce the space between the mega menu and categories menu, set the “Set sizes” design for each menu item.

https://prnt.sc/lkf4nPx3aXPU

3. Unfortunately, there is no way to set some background color for each menu item.

I’d be happy to assist if you have any other questions or concerns.

Kind Regards

hi support,
01. I’m not use a category menu but a standard menu, so there is not the background option. I’m afraid we’ve to use CSS …
02. I followed your hint, and I set the “set size” to 100 (from 495) for one item (vini rossi). no changes, even if I cleaned the browser cache. I’m afraid that also in this case we’ve to use CSS …
03. OK

Hello,

I would like to request temporary admin access to the website to take a better look at the issue there.

Looking forward to collaborating with you!

Kind Regards

sure. you can find the credentials in the private area

let me add a new request: how can I change the color of the main menu item on hover?

Hello,

Please make sure that the address of the site is correct: https://prnt.sc/fpvr_acY4u7G

I await your response.

Kind Regards

https://staging.acinolilla.com/

Hello,

1. Edit that menu, or rather the “Vini” menu item and change the “Aside style” to “With background”.

https://prnt.sc/coQNXf58q-uj

2. Seems that you have fixed the space between menus: https://prnt.sc/fP-eLMOZguQ5

If you have any other questions or concerns, please do not hesitate to reach out, I’d love to help!

Kind Regards

Hi, I made how you wrote, and you can find in the picture attached my questions.
thank you

Attachments:

You must be logged in to view attached files.

Hello,

1. Reduce the height of the items:

.whb-header .wd-dropdown-menu.wd-design-aside.wd-style-with-bg .wd-sub-menu-wrapp>.wd-sub-menu>li>a {
    padding: 10px 20px;
}

2. The hover color try to change via Theme Settings -> Typography -> Advanced -> create a new rule with the “Main navigation” condition and change the hover color via an appropriate field: https://prnt.sc/4reoHVlNYfC3

Let me know if you have any questions, I’d be happy to answer them.

Kind Regards

I added the rule and it works fine, thank you.
As for the menu items vertical space/padding, the CSS you sent me seems not to work.
Look at the image attached or go to https://staging.acinolilla.com/
Besides, how can I have the same settings for all the menu in the header?
with the “main navigation” rule I fixed the left side and what rule I have to add for the menu on the right side?
thank you

Attachments:

You must be logged in to view attached files.

Hello,

1. Here is another rule for that menu: https://prnt.sc/4s4-u9ktLumz

2. Try to use the below code for help:

.whb-header .wd-sub-menu li>a {
    padding-top: 4px;
    padding-bottom: 4px;
}

Kind Regards

all is working like a charm! thank you!

Hello,

You are welcome! In case you need any additional help, I’d be more than happy to assist you.

Have a good day!

Kind Regards

[Author]

Posts