I have created a horizontal menu with an overflow-x: auto; property for the wrapper <div>, and a flex-wrap: nowrap; property for the main <ul>'s <li> elements.
One of the main menu items has a couple of children. I had started with overflow-y: hidden; for the entire menu, and a compromise that no sub-menus would be visible.
After delivering that, I am currently puzzled if there would be an alternative solution which would allow me to include the sub-menu in my setup also. The unwanted behavior is that every overflow-y option that I set to the wrapper <div> allows my users to scroll the parent menu out of the view vertically, when the sub-menu items become visible, since the sub-menu opens vertically. Ideally I would like to allow the sub-menu to open outside of the container (something similar to z-index:99999; which I have tried, but of course did not work). Chrome Dev Tools includes an overlay option which looked promising, but I could not find any documentation on that, and applying it did not work either.
This is a screenshot of the horizontal menu when the sub-menu is collapsed and I have scrolled to the sub-menu parent item horizontally.
This is what it looks like when the sub-menu is expanded and I have scrolled vertically slightly. The sub-menu items are appearing in the wrapper space, but scrolling to them forces the parent menu out of the view.
This is what the entire thing looks like if I add a height of 300px to the whole wrapper, to reveal the whole of the parent and child menus.
Lastly, this is the effect that I am after.
Related
I have a problem with my website https://kudatoday.kz/ where I'm trying to make my slide in menu visible with overflow:hidden on the parent element.
I tried to set position:absolute to .slide-in-menu and position:absolute to header element however it didn't help.
My slide in menu is still hidden. I used overflow:hidden just to hide the white blank space on the right, because it appeared once I've created side in menu.
Could you please take a look?
What it should be and what we have:
Put overflow-x:hidden in the <body> tag and then remove overflow:hidden from the css et_pb_section_0_tb_header in the header <div> that is causing the slide in menu to be clipped.
That should solve the clipping issue.
You also need to change position:absolute to position:fixed in the .et_pb_row_1_tb_header css for the slide in menu because it currently scrolls the slide in menu when you scroll the main web page.
This is a very weird and specific bug that only happens on Firefox, and I'm having trouble narrowing it down.
I have a page with a sticky menu followed by a fluid container.
In order to remove all padding from the container while keeping everything else untouched (like column gutters), I had to add this CSS to it:
#main-container {
padding: 0;
overflow-x: hidden;
}
This is the only simple way I found to do that, and it works.
If you remove the overflow property, some horizontal scrolling appears.
See https://stackoverflow.com/a/35192643/5845942
But when I pin the menu, scroll until its position becomes fixed, and interact with certain items on the page, vertical space appears on the page, between the menu and the container.
This happens when triggering CSS transitions and other JS DOM manipulations.
Here is a jsfiddle: https://jsfiddle.net/vctls/mac2Ls0d/35/
A screenshot:
And a video:
https://imgur.com/a/28KhPEY
Again, this only happens on Firefox. Chrome handles the layout without any issue.
It doesn't happen either if the menu isn't pinned, or if you remove the overflow property from the container.
This seems to be a Firefox bug. I found a similar issue was already reported:
https://bugzilla.mozilla.org/show_bug.cgi?id=1618029
I'm trying to find a workaround.
I am facing problems with horizontal scrolling menu into my website.
I used the code of w3schools for this navbar. The problem is that it does not applies to the nav menu. Therefore, the scroll effect is missing both on PC and Mobile version.
Link to my website
Here is how nav menu looks like:
Remove the display: block style from your .active class.
The scrollbar does not appear because it fits inside without the need of a scrollbar. Set a max-width style to the parent element to get the scrollbar
It's simple but I can't find the solution.
https://prnt.sc/q6mfb6
https://codepen.io/lastofdead/pen/WNbvXRP
As it appears, the drop-down menu stuck in div. What should I do to get dropdown menu out?
You need to remove overflow-y: auto from .hastanotu as it's preventing your div from showing the content when its height increases, and hence showing the scroll bar. By removing it you let the div flow naturally.
solution: https://codepen.io/obedparla/pen/zYxEgGY
I have a page I'm working on that encompasses a vertical drop-down menu. However, when the menu drops down, it pushes the text below it downwards and off the page. This is expected, but this enables the scroll bar on the side of the page. I was wondering it there was a way to get rid of this. In other words, it shouldn't just not scroll, but never even offer the option to scroll.
Thanks!
If you want no scrollbar to appear and no scrolling whatsoever to occur, in the CSS for the div in which you contain said dropdown use
overflow: hidden;
This will cut off any 'additional content' though; see an example here
Use overflow: hidden; on the element you want to hide the scrollbar on.