Scroll able menu navbar

Design help General
1

Hello, I have an issue with my menu in my navbar. I have a menu that a bit long. I tried to make the menu scrollable but fail to do that. I tried overflow and make 1000px height for the menu. Still not working. please help me.

URL: http://africa-staging.webflow.io/
read-only link: https://preview.webflow.com/preview/africa-staging?preview=5cfdfd16543702535630fa3a38e9a25f

2

Hello @addesignsclient

Welcome to the Webflow forums,

I hope this video helps you solve the scrolling issue on the mobile menu. You can set it to any height you like, I used 80VH as an example.

CloudApp

For an element to scroll, it must have a height set other than %.

3 Likes
3

hello, thanks a lot for answering the question. It helps me a lot. One more question is there anyway if I make the width of nav menu below 140px. Right now, the smallest width I can give to nav menu is 200px. Below than that will only give the same width as 200px. If possible, I want the width of nav menu as in the picture I attached to this comment.

1
1749×1454 132 KB
Thank you

4

It looks like the minimum by default is 200px. I’ve tried smaller percentages, VW, and it won’t go any smaller.

Most wouldn’t have a use for a navbar much smaller than 200px perhaps?

@StuM or @aaronocampo would you know the answer to this?

5

Yeah, I hope I can just use 200px. But my client wants it to be less than 200px. Is it possible make it smaller by using embed code?

6

Try to use this code:

        <style>
         .'yourclassname' {
         max-width: 140px !important;  }
        </style>
7

still not working. Thanks alot btw.

8

Where did you add the code?

1 Like
9

on the homepage. I put as last element on the page.

10

Can you try adding it before the body tag of that home page please?

png
png1306×1832 91.1 KB

11

still same. I tried both in head tag and before body tag. still not work

12

Just a thought @aaronocampo - will @addesignsclient need to change his 200 setting back to ‘auto’ for your snippet to work? cc @magicmark

13

Already tried that one. Still not work. I’m not gonna publish it through webflow hosting. Is there any way overwriting the limit in the CSS file when I download the zip file of the website?

14

If you publish it in the temporary domain that you get it should be visible.

15

Yeah, I always did that to check if the code work. here the link http://africa-staging.webflow.io/

16

I have an idea, which it might not be the ideal but you’ll get the same visual result:

  • Create a new Div Block that goes inside your nav menu
  • Give it a class and style it with a 140 px width
  • Change the background colour of your actual nav menu to transparent
  • To your new created div block give a background colour of gray to act as your menu

I created a small video to show you the outcome. Let me know if that helps.

http://cloud.ipagroup.co/qJ1f