# How to make sidebar menu scrollable on smaller screens

**URL:** <https://forum.bubble.io/t/how-to-make-sidebar-menu-scrollable-on-smaller-screens/68506>\
**Category:** Responsiveness\
**Created:** [October 4, 2019, 10:36am UTC](https://forum.bubble.io/t/how-to-make-sidebar-menu-scrollable-on-smaller-screens/68506 "2019-10-04T10:36:44Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![help](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/help/32/166707_2.png) [@help](https://forum.bubble.io/u/help)\
**Post date:** [October 4, 2019, 10:36am UTC](https://forum.bubble.io/t/how-to-make-sidebar-menu-scrollable-on-smaller-screens/68506/1 "2019-10-04T10:36:44Z")

</div>

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](https://us1.discourse-cdn.com/bubble/original/3X/e/9/e98a6e7325d936712d5cdeadf0493a146953baca.png) ![39](https://us1.discourse-cdn.com/bubble/original/3X/e/d/ed6faed025fcca6258faacba8bf73555990bbdda.png)

---

<div class="post-metadata">

**Author:** ![alexjavierd](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alexjavierd/32/49260_2.png) [@alexjavierd](https://forum.bubble.io/u/alexjavierd)\
**Post date:** [November 22, 2019, 1:18am UTC](https://forum.bubble.io/t/how-to-make-sidebar-menu-scrollable-on-smaller-screens/68506/2 "2019-11-22T01:18:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![help](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/help/32/166707_2.png) [@help](https://forum.bubble.io/u/help)\
**Post date:** [November 24, 2019, 4:52pm UTC](https://forum.bubble.io/t/how-to-make-sidebar-menu-scrollable-on-smaller-screens/68506/3 "2019-11-24T16:52:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ryley.randall](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/ryley.randall/32/24248_2.png) [@ryley.randall](https://forum.bubble.io/u/ryley.randall)\
**Post date:** [November 24, 2019, 6:33pm UTC](https://forum.bubble.io/t/how-to-make-sidebar-menu-scrollable-on-smaller-screens/68506/4 "2019-11-24T18:33:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Thimo](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/thimo/32/208917_2.png) [@Thimo](https://forum.bubble.io/u/Thimo)\
**Post date:** [November 24, 2019, 6:49pm UTC](https://forum.bubble.io/t/how-to-make-sidebar-menu-scrollable-on-smaller-screens/68506/5 "2019-11-24T18:49:17Z")

</div>

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](https://us1.discourse-cdn.com/bubble/original/3X/e/2/e29fc1d3ec934b231ca6996d64e85d40394c2c7c.png)

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](https://us1.discourse-cdn.com/bubble/original/3X/b/4/b464f2ed505a068587eeb7e1fd5c802e9fb075a0.png)

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

---

<div class="post-metadata">

**Author:** ![help](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/help/32/166707_2.png) [@help](https://forum.bubble.io/u/help)\
**Post date:** [November 30, 2019, 10:17am UTC](https://forum.bubble.io/t/how-to-make-sidebar-menu-scrollable-on-smaller-screens/68506/6 "2019-11-30T10:17:30Z")

</div>

Really? OK ill give that a go thank you!

---

<div class="post-metadata">

**Author:** ![chad](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/chad/32/89415_2.png) [@chad](https://forum.bubble.io/u/chad)\
**Post date:** [December 1, 2019, 8:38pm UTC](https://forum.bubble.io/t/how-to-make-sidebar-menu-scrollable-on-smaller-screens/68506/7 "2019-12-01T20:38:01Z")

</div>

Can you a gif of what this looks like

---

<div class="post-metadata">

**Author:** ![anon91331491](https://avatars.discourse-cdn.com/v4/letter/a/9de053/32.png) [@anon91331491](https://forum.bubble.io/u/anon91331491)\
**Post date:** [September 27, 2021, 9:21am UTC](https://forum.bubble.io/t/how-to-make-sidebar-menu-scrollable-on-smaller-screens/68506/8 "2021-09-27T09:21:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![help](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/help/32/166707_2.png) [@help](https://forum.bubble.io/u/help)\
**Post date:** [September 29, 2021, 6:33pm UTC](https://forum.bubble.io/t/how-to-make-sidebar-menu-scrollable-on-smaller-screens/68506/9 "2021-09-29T18:33:30Z")

</div>

Thanks Tim for sharing!

---

<div class="post-metadata">

**Author:** ![atdream105](https://avatars.discourse-cdn.com/v4/letter/a/e47774/32.png) [@atdream105](https://forum.bubble.io/u/atdream105)\
**Post date:** [June 4, 2023, 11:32pm UTC](https://forum.bubble.io/t/how-to-make-sidebar-menu-scrollable-on-smaller-screens/68506/10 "2023-06-04T23:32:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![marco.grossi79](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/marco.grossi79/32/242787_2.png) [@marco.grossi79](https://forum.bubble.io/u/marco.grossi79)\
**Post date:** [August 30, 2025, 3:12pm UTC](https://forum.bubble.io/t/how-to-make-sidebar-menu-scrollable-on-smaller-screens/68506/11 "2025-08-30T15:12:26Z")

</div>

This is how to do it:

1. Vertically float relative to: Both
2. Leave height settings empty
3. Set groups inside side nav bar to: Allow vertical scrolling when content overflows