-
Posts
-
I love the sticky header option, but I notice it causes problems when used in conjunction with long dropdown menus or tall mega menus — if the user’s on a low-res screen or browser with not much height, the menu can get cut off on the bottom and there’s no way to scroll down to the bottom of the menu. For example, if you reduce the browser height enough on https://dtpc.wpenginepowered.com/ the lower items in the 2nd row of the mega menu get cut off — like in this screenshot: https://capture.dropbox.com/aVnLKZ7leLPURImg — and become unreachable. Does anyone have a solution for that, other than shortening the menu/drop-downs or switching to a scrolling header? Thanks!
can you try this:
#top #header .avia_mega_div { max-height: calc(100vh - 20px); overflow-y: auto !important; }Nice, Guenni007 — it didn’t scroll down far enough with 20px, but I changed that to 120px and it seems to work now….but I don’t really understand why — what is that calculation doing, anyway? I mean, you’ve done enough — you don’t have to also explain it to me ;)
Hi,
Great, I’m glad that @guenni007 could help you out. The calculation basically says that the max height should be the height of the browser minus 20px. https://www.w3schools.com/cssref/css_units.php
Best regards,
RikardThanks, Rikard — I get that; I just don’t understand why we’d have to subtract from the max height, and why it seems necessary to subtract more in order to get more scroll — like, why did I have to change that number from 20 to 120? But again, I’m just curious — it seems to be working, so don’t feel obligated to answer.
Hi,
Thanks for the update. I’m not sure since I can’t view your site, but maybe 120 pixels is the height of your header?
Best regards,
RikardSorry — credentials are now in Private — The header is 150px, but the scrolling doesn’t seem to change when the header is shrunk. I figured it was probably some offset for the header, but even if that’s true I don’t really understand what’s happening with that calculation. But that’s ok — again, it seems to be working, and it’s certainly not your job to help me understand the code ;). Feel free to close this thread.
Hi,
Thanks for the update. If the code is working, then I don’t think there is any reason to change it :-)
I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.
Best regards,
Rikard
- The topic ‘sticky header menu scroll issue’ is closed to new replies.