Change the background and text color of dropdown and megamenu

Store Design
, , , ,
1

Hello Everyone!

I am using Shopify Impulse 7.1.0 theme. I want to change the background color and text color of dropdown and megamenu. I want to keep the megamenu background color white and text color black. Please help me. Thanks in advance.

Store Url: https://urbanglowingstore.myshopify.com/

Pasword: Admin

Megamenu
Megamenu1894×441 55.1 KB

Dropdown
Dropdown1889×309 28.6 KB

1 Like
3

Hi @dreamtechzone_5

This should be relatively easy, paste this into your theme’s coding:

/* Background color */
.site-nav__dropdown, 
.site-nav__dropdown.meganav {
  background-color: #ffffff !important;
}

/* Text color */
.site-nav__dropdown a,
.site-nav__dropdown .site-nav__dropdown-link,
.site-nav__dropdown .h5 {
  color: #000000 !important;
}

Hope this helps!

4

Hi @dreamtechzone_5,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.


.site-nav__dropdown a, .site-nav__submenu a {
    background-color: black !important;
    color: white !important;
}

ul.site-nav__dropdown.text-left {
    background-color: black !important;
}
.site-nav__dropdown.megamenu.text-left {
    background-color: black !important;
}

image
image1578×500 85.8 KB

image
image277×194 2.86 KB

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution

5

You can change the dropdown and megamenu colors in the Impulse 7.1.0 theme using custom CSS.

Steps:

  1. Go to Online Store → Themes → … → Edit code

  2. Open base.css or theme.css

  3. Add the code below at the bottom and save.

/* Mega menu background and text color */
.mega-menu,
.mega-menu__content {
  background-color: #ffffff !important;
}

.mega-menu a,
.mega-menu__title,
.mega-menu__link {
  color: #000000 !important;
}

/* Dropdown menu background and text color */
.site-nav__dropdown {
  background-color: #ffffff !important;
}

.site-nav__dropdown a {
  color: #000000 !important;
}

.site-nav__dropdown a:hover {
  color: #000000 !important;
}

This will keep the megamenu and dropdown background white with black text across desktop.
If you want separate colors for mobile or hover states, those can be customized as well.