dropdown menu slider

[yourbeauty]

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 */
}

[DitalTek]

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;
}

[yourbeauty]

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

[DitalTek]

Hi

Do you have add code to right place?

Is the result you want to achieve?

[yourbeauty]

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

 Does it seem correct?

[DitalTek · Accepted solution]

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;
}

[yourbeauty]

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

Best,

Livia

[DitalTek]

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