dropdown menu slider

Store Design
1

Hello,

I would like a slider for the Dropdown menu, which doesn’t seem to appear for any reason. The drawer menu has it, but I don’t like that design. I have this code inserted into base.css, but it doesn’t work. Any help would be appreciated. The website is www.yourb3auty.com.

Thank you much!

/* Step 1: Make Dropdown Menu Scrollable /
.list-menu {
max-height: 300px; / Set the dropdown height limit /
overflow-y: auto; / Enable vertical scrolling /
overflow-x: hidden; / Prevent horizontal scrolling /
display: block; / Ensure items stack vertically /
padding: 0; / Reset padding /
margin: 0; / Reset margin */
}

/* Step 2: Style Scrollbar for Modern Browsers /
.list-menu::-webkit-scrollbar {
width: 8px; / Scrollbar width */
}

.list-menu::-webkit-scrollbar-track {
background-color: #f5f5f5; /* Background color for scrollbar track */
}

.list-menu::-webkit-scrollbar-thumb {
background-color: #aaa; /* Scrollbar thumb color /
border-radius: 10px; / Rounded scrollbar thumb */
}

.list-menu::-webkit-scrollbar-thumb:hover {
background-color: #555; /* Darker thumb on hover */
}

/* Step 3: Add Scrollbar for Firefox /
.list-menu {
scrollbar-width: thin; / Thin scrollbar /
scrollbar-color: #aaa #f5f5f5; / Thumb and track colors */
}

/* Step 4: Remove Parent Element Restrictions /
.header__menu, .dropdown-container {
max-height: none !important; / Remove height constraints /
overflow: visible !important; / Ensure dropdown visibility /
position: relative !important; / Fix positioning issues */
}

/* Step 5: Debugging Border (Optional) /
.list-menu {
border: 2px solid red; / Use for debugging - remove once verified */
}

/* Step 6: Adjust Global Variables (Optional) /
:root {
–header-height: 300px; / Adjust height variable /
–font-body-scale: 1.1; / Ensure proper scaling */
}

2

Hi

To achieve that, you need to add the short code here to the base.css file.

details[open] > .header__submenu {
   max-height: 30rem;
   overflow: auto;
}
3

Hi, No, unfortunately, still doesn’t work.

4

Hi

Do you have add code to right place?

Is the result you want to achieve?

DitalTek_0-1734603735477.png
DitalTek_0-1734603735477.png776×852 117 KB

5

Hello,

Thank you for following up! Yes, that is precisely I would like to achieve. I inserted the code like this to the base.css

yourbeauty_0-1734636720123.png
yourbeauty_0-1734636720123.png972×926 46.8 KB

Does it seem correct?

6

Yes, that correct, but i don’t see anything change on your menu also the style appear in console screen, maybe has point mistake when add code,

you can go to this file: /assets/component-list-menu.css

and then add a short code below here:

.js details > .header__submenu {
  max-height: 30rem;
  overflow: auto;
}
7

Yes, you saved the day! :slightly_smiling_face: Thank you so much for the follow up and diligence! I appreciate it so much!

Best,

Livia

1 Like
8

Great, I feel happy when it’s helpful to you.