How can I alter the mobile menu color in the Dawn theme?

Store Design
1

I would like to change all colors on the mobile menu. Where do I code this?

https://morningragecoffee.myshopify.com

password aultay

1 Like
2

Hi @michaelsf83 ,

Thank you for sharing your website. Are you talking about the highlight color when you tap? If so, please follow the instructions below to change it.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the base.css
  3. Paste the code below at the very bottom of the file.

NOTE: Change color red to the color you want

ul.menu-drawer__menu.has-submenu.list-menu li {
    -webkit-tap-highlight-color: red;
}
3

Thats the highlight color, im talking about the text and everything, the icons at the bottom too. Those are all White. I wanted to make them #B3B1A2

1 Like
4

@michaelsf83

Here your go. Please change the code provided with the code below.

.menu-drawer__inner-container {
    -webkit-tap-highlight-color: rgba(179,177,162, 0.5);
}
5

Looks like this did it :slightly_smiling_face:

/* Change Color on Menu */
.header__icon,
.header__icon–cart,
.header__icon–menu .icon-hamburger,
.header__icon–menu .icon-close,
.header__icon–menu .icon,
.header__icon–account,
.menu-drawer__close-button:focus,
.menu-drawer__close-button:hover,
.menu-drawer__menu-item–active,
.menu-drawer__menu-item:focus,
.menu-drawer__menu-item:hover,
.menu-drawer__account,
.list-social__link,
.link–text,
.header__active-menu-item {
color: #B3B1A2 !important;
}

1 Like