Scrollable Menu/Navbar (fixed position)

Design help General
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…

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.

1 Like
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.

3 Likes
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!

1 Like
8

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

9

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

1 Like
10

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