Assistance Needed with Menu Customization

Good day Support Team,
I am currently working on customizing my website’s menu and would appreciate your guidance on the following points:

Desktop: (Refer to the attached screenshot)
1. How to add separate lines in the drop-down menu.
2. How to add a pointing arrow to the drop-down menu (similar to the mobile menu).
3. How to change the color in the drop-down menu.

Mobile: (Refer to the attached screenshot)
1. How to change colors in the drop-down menu for each submenu.

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Please try to use the below custom CSS code and paste it to Theme Settings >> Custom CSS >> CSS for Desktop section:

.wd-sub-menu li {
      border-bottom: 1px solid white;
  }
.wd-nav-product-cat .wd-sub-menu li a {
     color: #2575fc;
}

Add this code in Theme Settings >> Custom CSS >> CSS for mobile section:

.wd-nav-accordion-mb-on .wd-nav-product-cat li a {
     color: red;
}

Best Regards.

Good day Support Team,

I appreciate your prompt response and assistance. Following the application of the provided CSS codes, I observed changes in text color but not in the background. I would like to achieve the following styling modifications for both desktop and mobile views:

Desktop: (Refer to the attached screenshot)

• Change drop-down menu text color
• Change drop-down menu hover text color
• Change drop-down menu background color

Mobile:

• Change drop-down menu text color
• Change drop-down menu hover text color
• Change drop-down menu background color for submenu/sub-submenus

Thank you for your support.

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to say I have been unable to visit your site due to maintenance mode. Please share the wp logins details in the private content so i will check and give you a custom css code.

Best Regards.

Hi,

Please see below in extra information

Hello,

Please try to use the below custom CSS code and paste it to Theme Settings >> Custom CSS >> CSS for Desktop section:

.wd-nav-product-cat .wd-sub-menu {
    --sub-menu-color: #eb0b0b;
    --sub-menu-color-hover: #4285f4;
	background-color: yellow;
} 

Add this code in Theme Settings >> Custom CSS >> CSS for mobile section:

.wd-nav[class*="wd-style-underline"] .nav-link-text {
    background-color: blue;
}
.wd-nav[class*="wd-style-"]>li>a {
    background-color: #371b1b;
	color: red;
}
.wd-nav-accordion-mb-on.color-scheme-light .wd-nav-product-cat .wd-dropdown {
    background-color: yellow;
}

Change the code as per your requirements.

Best Regards.

Hi Support Team,

Thank you for sorting out the Menu background colors. However, in Desktop Menu, how can I add a pointing arrow/sign to indicate that there is a submenu in the next column, similar to what we have in the Mobile menu? (Refer to the attached screenshot)

Thank you.

Attachments:

You must be logged in to view attached files.

Hello,

Sorry but there is no option in Theme Settings available for that.

It requires customizations and this is beyond our limitations and support policy.

Regards.
Xtemos Studios

[Author]

Posts