Sidebar Menu Design, Impact Theme

[Ab52]

Hi everyone,

I have a design for my sidebar menu, but it doesn't work exactly the way I want it. I would like in my menu on the first page to be 2 childeren red, 4 childeren smaller and black & and 5 childeren even smaller and black. I have already created a code for this (see attachment) but it also works in the submenus which is not the intention (see attachments). Can someone help me, and adjust my code so it's correct. My site: [REDACTED]

attachments

So this is what I don't want, that my code adjusts everything in my menu, including my submenus:

https://cdn.shopify.com/videos/c/o/v/110b2b7b978b4a22ae6d11b2b780138b.mov 

this is what i want:

https://cdn.shopify.com/s/files/1/0741/4461/2617/files/IMG_0677.jpg?v=1716215681 

https://cdn.shopify.com/s/files/1/0741/4461/2617/files/IMG_0678.jpg?v=1716215681 

https://cdn.shopify.com/s/files/1/0741/4461/2617/files/IMG_0679.jpg?v=1716215681 

the code:

<style>
#header-sidebar-menu ul li:nth-child(n+1):nth-child(-n+2) {
font-size: 26px;
font-weight: 800;
color: #8D3615;
webkit-font-smoothing: antialised;
}
#header-sidebar-menu ul li:nth-child(2){
padding-bottom: ;
}
#header-sidebar-menu ul li:nth-child(n+3):nth-child(-n+6) {
font-size: 24px;
font-weight: 800;
webkit-font-smoothing: antialised;
}
#header-sidebar-menu ul li:nth-child(6){
padding-bottom: 1rem;
}
#header-sidebar-menu ul li:nth-child(n+7):nth-child(-n+11) {
font-size: 14px;
font-weight: 800;
webkit-font-smoothing: antialised;
}
</style>

[jennyj]

Hi AB52, 
Thanks for posting! I'm have looked for a theme with a proper sidebar menu like yours for almost a year. I see a lot of people asking for that feature in the themes. But the developers doesn't seem to pick this up.
I hope they do, and if you find a solution, please let me know!

Good luck!
Jenny