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>

[EBOOST · Accepted solution]

Hi @Ab52 ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/theme.css
3. Add code below to end of file

.panel__scroller > ul.v-stack li:nth-child(2) ,
.panel__scroller > ul.v-stack > li:nth-child(1){
  color: #8d3615;
  font-size: 26px;
  font-weight: 800;
}
.panel__scroller > ul.v-stack li:nth-child(3),
.panel__scroller > ul.v-stack li:nth-child(4),
.panel__scroller > ul.v-stack li:nth-child(5),
.panel__scroller > ul.v-stack > li:nth-child(6){
  font-size: 24px;
  font-weight: 800;
}
.panel__scroller > ul.v-stack li:nth-child(3),
.panel__scroller > ul.v-stack li:nth-child(7) {
  margin-top: 1rem;
}
.panel__scroller > ul.v-stack li:nth-child(7),
.panel__scroller > ul.v-stack li:nth-child(8),
.panel__scroller > ul.v-stack li:nth-child(9),
.panel__scroller > ul.v-stack li:nth-child(11),
.panel__scroller > ul.v-stack > li:nth-child(10){
  font-size: 14px;
  font-weight: 800;
}