How do you make a scrollable horizontal menu?

This is my current menu
image

I would like to add another button on this menu but there’s no room.

Any idea on how to add another button on there and make it scroll horizontally? I know you can do horizontal scroll with a repeating group; however, these are buttons and not a RG.

put each button into a single cell of the R.G. and put a conditional on each button to be visible when “current cell index is…” so whatever button you want shown first current cell index is 1

current cell index is just the number of the R.G. in order so your fourth and last button would be current cell index is 4

2 Likes

RG is not the right solution :smile:
Use CSS #group {overflow: auto; white-space: nowrap;}

4 Likes

Or follow the solution provided that is no-code

It’s not working :confused:

Have u got an update? x)
I’m interesting to this subject :slight_smile:
Thanks
Arnaud

Bubble now has built in functions with the flexbox system to check a box to enable vertical scrolling but not horizontal scrolling at the moment. You would need custom CSS.

<style>
#YOURELEMENT ID {
overflow-x: auto !important;
}
</style>
1 Like

Hi,

If u want to see how I implement it:
Editor: Scrollmenuarnaudledoeuff | Bubble Editor

Preview: https://scrollmenuarnaudledoeuff.bubbleapps.io/version-test?debug_mode=true

I add some javascrpt to scroll horizontally on scroll mouse :wink:

Cheers :sunny:
Arnaud

3 Likes

Hi

In the repeating group set to min width zero and fit width content checkbox.
inside repeating group put a group and min width set to 400px Up. then add the button.

Hey guys, this works well. To expand on boston’s code and add something from arnaud’s example, the following works for me:

<style>
#groupID {
overflow-x: auto !important;
flex-wrap: nowrap !important;
}
</style>

Thanks for your help everybody. flex-wrap is the key property here. Hope this helps.

3 Likes

brother you saved my life, spent hours on this. Was using a template and even after deleting all the preset CSS from “Script in body in settings”, the normal basic horizontal scroll rg wouldn’t work. So I used this to override the CSS.

Any suggestions on how completely remove any preset CSS from a template app? Tried looking all over the app but couldn’t find anything.

1 Like

I try to use the app search tool plus looking into settings.

First, I’d suggest going to settings and checking SEO/Metatags tab and scroll down to the Advance section to check the script in header and body sections.

If you don’t see anything there, can search the app search tool for HTML elements, but I say that only because that is where I place my custom CSS so I can easily find it using the app search tool. Some developers may use the page settings and add it there, so might need to check each page.

If you don’t find any HTML elements with the custom CSS, and no pages have the settings, then I’d look at the plugins in use, delete any for CSS, then check the issue checker to see where the plugins might have had their values used by dynamic expressions.

Or, you could just contact the template developer and ask them where it is. Check the template page and go to the contributor profile and find their contact button/info.

1 Like

Worked mate, It was in a plugin.

I love you so much man. Thank you for this. 10000000x. Can’t thank you enough… Love you a million times fellow human!!! thank you!!! Yes!!! You go! I owe you

1 Like

Happy that help :fire:

It works like magic :smiling_face_with_three_hearts:
Thank you…

1 Like