How to make sidebar menu scrollable on smaller screens

Need help Responsiveness
1

Hi guys,

We have a sidebar menu (left in screenshot) that uses a floating group element and it looks great on 15" devices and fills the full height of the viewport (thanks to Zerocodes plugin). However on zoomed in screens or smaller screens elements are getting cut off and there is no way of scrolling.

so, how can I add a scrollbar that appears when there are elements cut off by the height of the viewport?

All elements, icons and the sidebar are fixed width.

49
493360×1940 481 KB
39
393360×1380 310 KB

2

you could try making a repeating group. Get the images from a data base, and make the links conditional

1 Like
3

Thats a good idea actually, wonder if it would work. Thanks for the suggestion i’ll give it an idea

4

May not fit your use case, but I have found if I set the floating group to be positioned to both (rather than top or bottom) and you stretch it to the end of your page, it will fit to the content and scroll when the page height gets smaller

2 Likes
5

A couple months ago I had the same problem but eventually I found a solution:

1, Install the ‘CSS tools’ plugin (free) and place it on your page.

2, Give the group you want to make scrollable an ID attribute (in my case “mobile”)

00

3, Place a HTML element on your page with this code:

Code here, replace "mobile" with your ID attribute 
<style>
* {outline: none !important;}

#mobile{
  overflow-y: scroll;
  white-space: normal;

  #inner {
    display: inline-block;
  }

}

#inner   {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

* {outline: none !important;}

</style>

4, Create a workflow on pageload like this:

00

Now when the group is outside the screen it should be scrollable.

1 Like
6

Really? OK ill give that a go thank you!

7

Can you a gif of what this looks like

8

I know it’s an old post, but I had a similar problem which I fixed by changing Vertically Float Relative from Top to Nothing for the page element. Then the sidebar scrolls with the page.

1 Like
9

Thanks Tim for sharing!

10

Mine is by changing Vertically Float Relative from Both. That works so far