How to change the color of only one drop-down menu on Turbo (PC + Mobile)

Solved
Highlighted
New Member
2 0 0

Hey there. I was wondering if anyone knew how to change the color of only one drop-down menu for the Turbo-Theme? Currently I have just added this code:

ul.menu.align_left li:first-child a {
    color: red !important;
}

 

But this changes the first-child of every over drop-down menu of mine. Like this:

Screenshot 2020-11-01 at 15.54.28.png

 

When what I ideally want is just this :

 

Screenshot 2020-11-01 at 15.55.27.png

 

Any help would be much appreciated. Thank you.

0 Likes
Highlighted
Explorer
81 8 11

This is an accepted solution.

 

 

@Daniel_Saleh   you can add class on your body tag in theme.liquid   {{request.page_type | handle }} the output of page url

 

 

<body class="template-{{ request.page_type | handle }}">

 

 

color is the same on mobile menu apply if not add this code inside the media query 

now your body has a different class you can apply CSS parent-child class 

 

 

 

.template-index ul.menu.align_left li:first-child a {
    color: green !important;
}

 

 


 
if need more help on it you can hire me

0 Likes