How to fix grayed out buttons in Dawn theme mobile menu?

Store Design
1

Hi, the mobile hamburger menu has several grayed out buttons.
I only want the section i’m at to be grayed out.
Anyone has a solution?

How i want it to look
How i want it to look461×998 53.9 KB

How i want it to look

How it looks now
How it looks now461×998 51.8 KB

How it looks now

2

Hi,

Add below css in base.css file

.menu-drawer__menu-item--active {
    background: none !important;
}

nav.menu-drawer__navigation ul li:nth-child(2) {
    background: red;
}

Change red with your color.

Thanks

Hit Like and Accept as Solution.

3

@Phil44

On hover property can’t work on the Mobile Devices.
Thank you.

4

@Phil44

Hello,

".menu-drawer__menu-item–active, .menu-drawer__menu-item:focus, .menu-drawer__close-button:focus, .menu-drawer__menu-item:hover, .menu-drawer__close-button:hover "

Search this class in your Online Store->Theme->Edit code->Assets->component-menu-drawe.scss.liquid file

and replace this class n your Online Store->Theme->Edit code->Assets->component-menu-drawe.scss.liquid file

.menu-drawer__menu-item--active:hover, .menu-drawer__menu-item:hover, .menu-drawer__close-button:hover, .menu-drawer__menu-item:hover, .menu-drawer__close-button:hover {
  color: rgb(var(--color-foreground));
  background-color: rgba(var(--color-foreground),.04);
}
5

That is only for number 2 in the mobile menu, can i not have it so it’s gray on the one i’m at currently? So when i change to another tab that is grayed instead.

6

This was a working solution, not like i thought.
But trying this out, it actually looks better! Thank you :slightly_smiling_face: