Change color on mega menu

Hello!
I would like to change this color (look picture) I added a CSS with another background but when I refresh the site it goes back to the original color, and if I refresh back again it goes back to this (blue color) I know I can change it in settings in theme. But I want the text for products to be black. Only the header and small icon on right to be blue.

Here are my CSS codes:

.menu-opener:not(.has-bg) {
    background-color: rgba(133, 144, 170, 1);
}

.menu-opener {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    min-width: 200px;
    max-width: 320px;
    height: 50px;
    color: #333;
    text-transform: var(--wd-header-el-transform);
    letter-spacing: .4px;
    font-weight: var(--wd-header-el-font-weight);
    font-style: var(--wd-header-el-font-style);
    font-size: var(--wd-header-el-font-size);
    font-family: var(--wd-header-el-font);
    line-height: 1;
    transition: all 0.25s ease;
}

.wd-header-cart.wd-design-4 .wd-cart-number {
    display: inline-block;
    padding: 0 2px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background-color: rgba(133, 144, 170, 1);
    color: #FFF;
    text-align: center;
    font-weight: 700;
    font-size: 10px;
    line-height: 19px;
}

Attachments:

You must be logged in to view attached files.

EDIT: Same with the WIDTH of the mega menu. it’s a bit smaller, but when i refresh it goes to orignal size, if i refresh again it goes back to smaller.

Hello,

Could you please provide a video explaining the issue to check it myself and help you out accordingly?

Because I am unable to see the issue on your website.

Regards.
Xtemos Studios.

Here is the video.

Edit:

Here is link:

Hello,

Please replace your Custom CSS with the following to change the background color of the menu dropdown and cart number then check back.

.wd-header-cats .menu-opener {
    background: red;
}

.wd-header-cart.wd-design-4 .wd-tools-text .wd-cart-number {
    background-color: red;
}

Best Regards.

Hmm.. Still same problem.

Edit: The cart is working good, same with WIDTH on mega menu, but color keep chahing from black to blue, to blue to black.

Hello,

Please provide the admin panel login details of the website to check it myself and help you out accordingly.

Regards.
Xtemos Studios.

Here is it

Hello,

Your issue has been Resolved. Please clear cache and check back.

Best Regards.

Thanks! Works perfect. Got another question. About the menu. I know I can use “html blocks” to make the menu how I want. But it wont show on the mobile device. Will just show all the products, you can’t choose category.

Hello,

You are Most Welcome.

Sorry but the Html Block set to work only for Desktop devices doesn’t work for Mobile devices.

Best Regards.

How can you make html blocks on desktop, and regular on mobile? So people can choose categories on phone, so they don’t have to look through the whole category.

Hello,

You can try creating separate menu for mobile categories and then add sub-menu items to it and add it as the categories menu for mobile by editing from the Woodmart >> Header Builder >> Edit Mobile header.

Screenshot for Clarification: https://gyazo.com/1a7f6b73642e0c14c311a8d381befd4d

I am currently marking this topic as Resolved. If you have other questions then create a new topic for each of your issues to avoid any confusion.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts