Dropdown within dropdown clipping in mobile view

I've found a way to add a dropdown within a dropdown and make it work. What I didn't expect was for the mobile version to clip or cut the items in the list. My current code allows me the nice dropdown menu list but the mobile version is giving me a hard time. I've tried all sorts of codes but none of them work. There was one code that did work but it would revert back to the same issue after testing the dropdown one time. I've checked and tried a JavaScript Fallback script but it didn't work either. Any help would be appreciated.

This is the current code I use. I didn't include any of the additional codes that didn't work.

/* make nav folder not clickable */
.header-nav-folder-title {
  pointer-events: none;
}
.header-nav-folder-item a {
  color: #BEAC94 !important;
}
// Adjust folder dropdown width
.header-nav-folder-content {
  min-width: 90px !important;
}
.header-nav-folder-item {
    text-align: left !important;
}
#block-yui_3_17_2_1_1705948391976_15058 { 
border-left: none!important; 
border-top: none!important; 
border-right: none!important; 
border-bottom: 2px solid #9B845B!important 
}
.search-input { 
border-left: none!important; 
border-top: none!important; 
border-right: none!important; 
border-bottom: 2px solid #9B845B!important 
}
.header-nav-list *:hover {
    color: white !important;
}
/* Show comment box */
.squarespace-comments .new-comment-area.anon-comments-off.logged-in-commenting-unsupported {
    display: block;
}
/* Enable dropdown on hover */
.header-nav-folder-content {
    display: none; /* Hide dropdown by default */
}

/* Show the dropdown when hovering over the main folder */
.header-nav-folder-title:hover + .header-nav-folder-content,
.header-nav-folder-item:hover > .header-nav-folder-content {
    display: block; /* Show dropdown on hover */
}

/* Keep the dropdown visible while hovering over it */
.header-nav-folder-content:hover {
    display: block;
}

/* Enable nested dropdowns to appear on hover */
.header-nav-folder-item:hover > .nested-folder-content {
    display: block; /* Show nested dropdown on hover */
}

/* Ensure main menu items can still be clicked */
.header-nav-folder-title {
    pointer-events: auto; /* Allow clicking on the main menu */
}
.nested-folder {
width: 180px !important;
}

Hi, that looks like it needs to be seriously unpicked. You might have more luck getting an answer if you can share a link to your site so the actual code in the browser can be inspected.

You can also use this way to add dropdown in dropdown in mobile menu

Thanks guys. The site is live and this is what happens no mater what code I use.

Here's the site link:
https://www.hedmanwellness.com/

The issue is that whatever code you're using to create the accordions doesn't seem to work nesting an accordion inside an accordion. The group that contains Individual, Intensives and Groups has a max height set on it, which is what allows the accordion to work. Because of the max height, it cannot get any bigger when you expand Groups.

You could add this CSS:

.header-menu-nav-item--accordion-folder .accordion-folder-content {
  overflow-y: scroll
}

...which I think will allow you to scroll within the container, but I don't think it works well.

From what I can see it would require a custom javascript solution that updates the max-height when a nested group is expanded. That's too much to include in a forum post but let me know if you'd like a quote for the work.

Andrew

Hey @k2m2_01, I can see you're using the Nested Folders plugin from will-myers.com. This plugin has been developed to allow for one additional level of nesting, and unfortunately a third isn't something that is supported by the plugin. 

I have also replied to your support ticket through the will-myers.com support service, let us know if you get any other questions. * Affiliate Links