How to change color of THIRD level sub-menu (Mobile - Dawn)

Technical Q&A
1

Hello,

I’ve searched far and wide trying to find a way to recolor the third level submenu on Mobile devices for my store using the Dawn theme.

I’ve successfully recolored the 2nd level with the code:

.mobile-facets__submenu {

background-color: #121212 !important;

}

This only recolors the 2nd level. I cannot find a way to recolor the third (example: Shop → Tops → THIRD LEVEL.

As you can see from the attached image, upon clicking the third level it is completely white. I would like it to be black (#121212)

Any insight would be greatly appreciated, thank you.

IMG_3466
IMG_34661179×1513 29.4 KB

IMG_3468
IMG_34681179×1280 14.4 KB

2

Hello,

The third level submenu in Dawn’s mobile navigation is still a `mobile-facets__submenu` element, but it’s nested deeper within the DOM. Your current selector `.mobile-facets__submenu` is applying to both the second and third levels, but something more specific is likely overriding the third level’s background color.

To target the third level specifically and ensure your color is applied, you need a more specific CSS selector. Try this:

```

.mobile-facets__details .mobile-facets__submenu .mobile-facets__details .mobile-facets__submenu {

background-color: #121212 !important;

}

```

This targets a `mobile-facets__submenu` that is itself nested within a `details` element, which is inside another `mobile-facets__submenu`, which is inside yet another `details` element. This increased specificity should ensure it overrides any default theme styles for the third level. Add this to your `base.css` or `theme.css` file.

If you’re still having trouble getting this working, please feel free to DM me with your website and I can further assist you.

Hope that helps!

3

This has been solved by a Shopify Support Advisor

.menu-drawer__submenu { background-color: #121212 !important; }

4

To change the third-level mobile submenu color in Shopify’s Dawn theme, the issue is CSS specificity. The second level works with .mobile-facets__submenu { background-color: #121212 !important; }, but the third level is nested deeper. Use .mobile-facets__submenu details .mobile-facets__submenu { background-color: #121212 !important; } in base.css or theme.css and test on mobile.