How can I highlight 'Gourmand' instead of 'Woody' with this CSS?

Store Design
, , , ,
1

Hello,

I’m contacting you because I’m encountering a CSS problem on the https://akrofragrances.com/ site.

On the Fragrances button mega menu, in column 2, the “Woody” link is highlighted in yellow, whereas I’d like to apply this highlighting to the “Gourmand” link.

MaxCosta_0-1707577730826.png
MaxCosta_0-1707577730826.png1185×493 129 KB

I have this CSS extract:

.mega-menu__block .mega-menu__content:nth-child(1) ul li:nth-child(4) a {> background-color: #e9ee00;> width: fit-content;> line-height: 1 !important;> padding: 0 !important;> }

I’ve tried replacing the 4 with the 1 here: ul li:nth-child(4)

But it applies to both columns and it’s no longer Rise > Summer that’s highlighted but Awake > Coffee.

Does anyone have an idea for highlighting only Gourmand instead of Woody with this CSS?

Many thanks in advance.

2

Hey @MaxCosta ,

Remove your existing CSS and add this instead

First CSS is for the first column (Rise > Summer), second CSS for the second CSS column (Gourmand)

.mega-menu__block.column:nth-child(1) .mega-menu__content:nth-child(1) ul li:nth-child(4) a {
    background-color: #e9ee00;
    width: fit-content;
    line-height: 1!important;
    padding: 0!important;
}

.mega-menu__block.column:nth-child(2) .mega-menu__content:nth-child(1) ul li:nth-child(1) a {
    background-color: #e9ee00;
    width: fit-content;
    line-height: 1!important;
    padding: 0!important;
}
1 Like