Nth-child is not working on mobile (Dawn)

Technical Q&A
1

Hi,

UPDATE: I solved the colour problem but when one of them is active, the colour doesn’t change (tested with nth-child(5))

.menu-drawer__navigation .list-menu li:nth-child(5) a {
  color: #a52f59!important;
}

.menu-drawer__navigation .list-menu li:nth-child(5) a .menu-drawer__menu-item--active {
  color: #43cac9!important;
}

.menu-drawer__navigation .list-menu li:nth-child(6) a {
  color: red!important;
}

.menu-drawer__navigation .list-menu li:nth-child(6) a .menu-drawer__menu-item--active {
  color: red!important;
}

Webshop: https://axiomunit.store

2

In addition to the technical specifics always try to mention what the actual GOAL is.

If you want to color a specific link and not others then nth-child is normally the wrong approach. nth-child will just cause headaches as now CSS has to changed every time you want to add/remove/reposition items.

Use CSS attribute selectors and target the content of the tags href value

I.e.

.menu-drawer__navigation a[href*="sale"] {
 color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

3

@PaulNewton you’ve got a point. Do you have any idea why the colour doesn’t change when item is active though?