Streaming live at 10am (PST)

Scrollable Menu/Navbar (fixed position)


#1

Hi!
I designed a navbar with 7 navigation links. It works fine on desktop and tablet but on mobile, as the menu is a bit long, some links get cut off.
I have read every topic I could find about this issue, tried every suggestion (including thewonglv's demo kit - "Scrollable Mobile Nav Menu" - which only works on empty pages...), tried setting the overflow to "auto", "scroll", you name it, I tried it!
I have no idea how to solve this issue! As a last resort I reduced the nav links padding on mobile, so at least on mobile portrait, all the links are visible. But I really don't like this "solution".
Can anyone take a look at my site and help me enable scroll?
Please check the "nav scroll" navbar (inside hero section)

Preview: https://preview.webflow.com/preview/mept-trabalho?preview=8d3391122c0c774e66300843e2e3cba5
Link: http://mept-trabalho.webflow.io/

PS: Webflow Team... I found so many users facing the same issue... I believe this should be native! Please don't tell I have to limit my navigation links to 4 or 5 because sometimes, that's just not possible! I strongly believe many users would really appreciate if the navbar component automatically enabled scroll when necessary. How can something that seams so easy be so hard?! Please...


Left scroll menu not scrolling
#2

Hi @Filipa

Overflow: scroll will work if you will give your menu some height instead of "auto". So if you will make it height: 100vh (which will be device height) and overflow: scroll or overflow: auto, it will be scrollable if there are not all links visible on the device screen height.


Scroll problems with a fixed sidebar on mobile devices
#3

Hi @sabanna. Thanks, but I already tried that and it's not working.


#4

Ok, since navbar is taking part of the screen we have to keep "nav menu" height = 100vh - navbar height (65px of div-navbar + 10px * 2 paddings) = 85 px;

CSS has great function: calc (), but Webflow doesn't have it built in yet.

So you can add this code snippet to "head" section of custom code area:

<style>
 @media (max-width: 767px)
{
.nav-menu {
    overflow: scroll;
    height: calc(100vh - 85px); 
}
}
</style>

And "nav menu" will not do out screen view and will be scrollable.


#5

I added the code snippet but still, no change... The menu doesn't scroll.


#6

Sorry, there was synaxis errors, I fixed the snippet, replace it please


#7

Thank you so much @sabanna! :smile: You're the best!


#8

You are welcome :slightly_smiling: Sorry for errors :grin:


#9

No problem! You're a life saver! :relieved:


#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.