Menu Dropdown (Mobile and Desktop)

Technical Q&A
1

My store uses color themes, and unfortunately the background of the dropdown menu can’t be changed. I’ve tried a few of the solutions, but nothing has worked. I can change the font, but my store is dark and the colors that show up on the white background don’t show up well on the dark theme. I’ve asked for support help, but hey haven’t been responsive. I’m using the Purity theme.

3

That’s one of the less popular themes, so I doubt you’d find any existing solutions or people familiar with how the theme works internally.

Ideally, share a link to your store (for new accounts it makes sense to not paste the link, but rather "spell " it).

You may try code like this in your header section “Custom CSS” setting:

.submenu.bg-white { /* for desktop drop-downs */
  background: black;
}

.menu-drawer .bg-white { /* for mobile */
  background: black;
}
4

Hi,

Hope this will help

Your Purity theme likely has a hard coded white dropdown background. Add custom CSS in base.css to override it:

CSS example

.header__submenu,
.header__submenu .header__menu-item,
.menu-drawer {
    background-color: #000 !important;
    color: #fff !important;
}

Clear your cache afterward and inspect the menu if additional wrappers need similar overrides.