dropdown menu slider

Store Design

Topic summary

Main issue: A scrollable “slider” (scrollbar) was needed inside the dropdown submenu, but CSS added in base.css didn’t take effect. The drawer menu already had scrolling, but its design wasn’t desired.

What was tried: The OP first styled .list-menu (max-height, overflow, custom scrollbar) and removed parent constraints, but the dropdown still didn’t scroll. A suggestion to add details[open] > .header__submenu { max-height: 30rem; overflow: auto; } in base.css didn’t work either.

Key fix: Add the CSS in the theme’s menu stylesheet instead of base.css:

  • File: /assets/component-list-menu.css
  • Rule: .js details > .header__submenu { max-height: 30rem; overflow: auto; }
    This targets the actual submenu element used by the dropdown structure, enabling scrolling within a capped height.

Outcome: After updating the correct file with the proper selector, the dropdown gained a scrollbar and worked as intended. The OP confirmed success and thanked the helper.

Notes: Screenshots were shared to show the desired result and code placement; the issue is resolved.

Summarized with AI on December 12. AI used: gpt-5.
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.