Solved

Sidebar Menu Design, Impact Theme

Ab52
New Member
38 0 0

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>

 

 

 

 

 

Accepted Solution (1)

EBOOST
Shopify Partner
989 265 305

This is an 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;
}
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤

View solution in original post

Reply 1 (1)

EBOOST
Shopify Partner
989 265 305

This is an 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;
}
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤