How to change color of mega menu eidget

Hi my website is https://maktubzakka.com

How can i change the background color, border color and hover color of the mega menu widget on the left side?

Thank you.

To change the hover color, modify this with CSS:

.menu-item > a:hover {
background-color: #fff;
}

To modify the border color (not sure where you want to modify it, but if you want to change the border around the entire widget, try this:)

.widget_nav_mega_menu.shortcode-mega-menu {
border: 1px solid black;
}

To modify the background color, you can change it through CSS here:
.widget_nav_mega_menu.shortcode-mega-menu {
background-color: #fff;
}

The widget border and backgroudn color is well solved.

However, if i change the hover background color, the color is still greenish-blue when my cursor point on it.

Sorry i am not familar with css,

Where can i find the CSS class for :

1.widget title section background color ( the part shown dark red now)
2.widget word color ( white now)

Thank you.

You can try a more general CSS class like this for the hover:

.btn.btn-color-alt, .button.btn-color-alt, button.btn-color-alt, .added_to_cart.btn-color-alt, input.btn-color-alt[type=”submit”], .btn.btn-color-alt:hover, .btn.btn-color-alt:focus, .button.btn-color-alt:hover, .button.btn-color-alt:focus, button.btn-color-alt:hover, button.btn-color-alt:focus, .added_to_cart.btn-color-alt:hover, .added_to_cart.btn-color-alt:focus, input.btn-color-alt[type=”submit”]:hover, input.btn-color-alt[type=”submit”]:focus, .btn.btn-color-alt.btn-style-bordered:hover, .btn.btn-color-alt.btn-style-bordered:focus, .button.btn-color-alt.btn-style-bordered:hover, .button.btn-color-alt.btn-style-bordered:focus, button.btn-color-alt.btn-style-bordered:hover, button.btn-color-alt.btn-style-bordered:focus, .added_to_cart.btn-color-alt.btn-style-bordered:hover, .added_to_cart.btn-color-alt.btn-style-bordered:focus, input.btn-color-alt.btn-style-bordered[type=”submit”]:hover, input.btn-color-alt.btn-style-bordered[type=”submit”]:focus, .widget_nav_mega_menu .menu > li:hover, .mega-navigation .menu > li:hover {
background-color: #fff;
}

1. Modify this ome:
.widget_nav_mega_menu .widget-title.color-scheme-light {
background-color: rgba(0, 0, 0, 0.23);
color: #fff;
}

2. Try this:

.mega-navigation .menu > li > a, .widget_nav_mega_menu .menu > li > a {
color: #000;
}

Hello,

Thank you @m360 for help in solving this problem 🙂

@freepreneur, did this code help you? Or you still have some additional questions?

Kind Regards
Xtemos

solved, thank you

You are welcome 🙂

[Author]

Posts