dear support team,
please have a look at the page in the secure note. only that one page yet.
i used the header builder to have 2 menus. one horizontal and one vertical on the left.
the one on the left has a problem when scrolling is activated. the submenus are behind the content. even though z-index is set on default 9999.
also is scrolls separately from the content. i would like to have it scroll along with the content. is that possible?
thanks a lot and have a nice day! kai
Hi Kai,
To fix the submenus and let it scroll, you need to turn off content scrolling and sticky bar of your bar element.
Hope that helps.
hi paul,
thanks for your quick reply!
the thing is that the vertical bar on the left does not have the option “sticky bar”. only the horizontal one has that option.
my goal is to have the left bar scroll up with normal page scrolling. meaning the whole page should scroll up. otherwise people on small screens will not be able to see the lower part of the vertical menu.
maybe this is not possible?
my credentials in the secure note in case you want to have a look 
thanks again! kai
Hey @iTurtle,
Making the side header scroll with the content is not possible. Even if you add custom CSS to make the Navigation Inline’s submenu appear when the bar scrolling is enabled, it still won’t look good because the scrollbar is also present. It’s not by z-index by the way.
You might want to use a Navigation Layered element instead.
Thanks.
hi christian,
thanks a million for your explanation and video - which helped a lot!
i am still wondering why the submenus of my current menu are behind the content and if this is fixable. i like the menu more than the layered menu (which requires a click to see the submenu items).
otherwise i will discuss the whole issue now with my colleagues and see which road we will take
thanks again and best wishes, kai
Hello There,
I have checked your site menu and this is what I am seeing.
Only the first menu item has a sub menu and it is showing on top of the main menu.
Did you happen to resolve your issue already?
Kindly let us know.
hi rue,
what you are seeing is the horizontal menu.
i was referring to the vertical menu on the left hand side.
the moment i make it scrollable the submenu disappears behind the content.
that is all explained in this topic…
i am now wondering if there is no css magic to make it appear in front of the content.
please read the whole topic.
thanks a lot! kai
Hello There,
Thank you for the clarifications. The menu displays behind because any overflow were hidden. To make sure that the sub menu will display on top, you will need to insert $el {overflow: visible !important;} in the inline css of the bar settings which I already did.
Please check your site now.
hi rue, i tried it out now (or you did already by inserting the code) but now the container does not scroll anymore. the scrollbar is visible but it refuses to scroll… any solution for that? thanks a lot! kai
Hello There,
Regretfully this is an on going issue with navigation inline added in a fixed left or right bar. I would highly recommend that you replace the navigation inline element with the navigation collapsed instead.
Thank you for your understanding.
hi there,
since you have access in this topic to the page in question i have another question regarding the vertical left menu: i would like to have the subindicator placed with the same disctance (i set it to 5px) from all main menu items. also the double lined menu items…
thanks a lot and best wishes, kai
Hi @iTurtle,
I tried it and it’s not working since it’s a flex layout. And even with CSS alignment, it’s not working since flex alignment always take over. And for alignment to work, the items should be in display: block instead of display: flex. Plus, the link is an inline element which doesn’t go 100% width unless converted to display: block;. Hence, for it to work, we must override the flex styling.
I tried overriding it and it causes more issues since the child elements are dependent to flex styling. But, you may try adding this CSS to your menu’s Element CSS option.
$el > li, $el > li > a {
display: block !important;
width: 100% !important;
}
$el > li > a .x-anchor-sub-indicator {
display: block !important;
position: absolute !important;
right: 5px;
}
What about the double lined items? How should it appear?
Thanks!
hi rad,
thanks so much for going into detail like this and providing this code i could have never come up with… !
that solution looks nice an tidy. wonderful. i saw in another menu that this was achieved with “auto” in a right margin field but that did not work here.
just to clarify: i meant actually 5px right hand side from the menu text and not from the right side of the element container. that was correct with the menu items with one row but not with the ones breaking into 2 rows. there the indicator was much further away from the menu text items.
thanks again and have a great day! kai
You’re most welcome and glad I could help 
And thanks for clarification, inline elements behave differently that’s why it may look different from another.
Thanks!
Hey Kai,
I just want to add this alternative non-coding solution to align the subindicator to the right. See https://youtu.be/ya2rq5zvNqg
Hope that adds additional knowledge to you.
dear christian, thanks so much! good service here i will try it out and let you know how it works. best wishes, kai
You’re welcome!
We’re glad our staff were able to help you out.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.