JQuery 3 and Long sub menus with native scrollbar

[milanspiele]

Hello,
if I use your code I lost the little arrow in the top of the submenu (see below).

Please have a look at our demo website:
https://neu.milan-spiele.de/

I think the code "$sub.css('overflow-y', 'auto');" is override something.

I appreciate any help.

Best Regards
Michael

[vadikom]

Hi, yep, that is indeed due to the custom code that adds a native scrollbar (i.e. it sets overflow-y: auto to the sub <ul> elements). Unfortunately, there is no way to solve this with the current carets since they are added via CSS generated content as child elements inside the <ul> elements and they get clipped due to the overflow-y: auto declaration so I would suggest disabling the arrows - you can do that in the SASS code in "/includes/css/sm-clean/_sm-clean-theme.scss" by finding and commenting out the following code:

		// First sub level carets
		> li > ul::before,
 		> li > ul::after {
			content: '';
			position: absolute;
			top: -($sm-clean__desktop-sub-caret-size * 2 + $sm-clean__border-width * 2);
			left: $sm-clean__desktop-sub-caret-left;
			width: 0;
			height: 0;
			overflow: hidden;
			border-width: ($sm-clean__desktop-sub-caret-size + $sm-clean__border-width);
			border-style: dashed dashed solid dashed;
			border-color: transparent transparent $sm-clean__desktop-sub-border-color transparent;
		}
		> li > ul::after {
			top: -($sm-clean__desktop-sub-caret-size * 2);
			left: ($sm-clean__desktop-sub-caret-left + $sm-clean__border-width);
			border-width: $sm-clean__desktop-sub-caret-size;
			border-color: transparent transparent $sm-clean__desktop-sub-bg transparent;
		}

or if you don't compile the SASS code on your own and use just the compiled version "/includes/css/sm-clean/sm-clean.css" please find and comment out the following CSS code inside:

  .sm-clean > li > ul::before,
  .sm-clean > li > ul::after {
    content: '';
    position: absolute;
    top: -18px;
    left: 30px;
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 9px;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent #bbbbbb transparent;
  }
  .sm-clean > li > ul::after {
    top: -16px;
    left: 31px;
    border-width: 8px;
    border-color: transparent transparent #fff transparent;
  }

Alternatively, if you absolutely need to keep the carets, they need to be added in a different way (e.g. as child elements of the parent <li> elements and then probably controlled via the API - i.e. shown/hidden when needed, etc.) but that would involve writing additional custom code which I don't have ready at the moment.

[milanspiele]

Thank you very much for your help and your inpiration. I now show the carets with show/hidden. It worked for me.