Is there a way to put a scrolling menu on a page that is viewable in mobile view? Horizontal
Example: https://www.apple.com/iphone/
When viewed on a mobile the Iphone shapes can be scrolled horizontally
Thanks
Scott
Yes but this is quite difficult to explain. Let’s say you want to do this for Tabs.
-
In your database, add a table named “Tab”. It should have a number field called “id” and a text field named “name”.
-
Manually add your tabs in the data table. The tab you want to show 1st should have an id of 1, etc.
-
Now, in the design editor, add a group with a min-width of 0. We’ll call it GROUP 1. It should be the full width of the page.
-
Inside GROUP 1, add a group called GROUP 2. Give it a fixed width and give it 20px margins. Also, in the responsive editor, make sure it is aligned to the left.
-
Inside GROUP 2, add a repeating group. We’ll call it RG1. RG1 should have a horizontal scroll. It should also have the same number of columns as the number of tabs. Lastly, it should only have 1 row. Add text in the cells to indicate which tab is which. (Make sure the data source is “Search for Tabs :sorted by id DESC”).
-
To finalize the structure of your scrolling menu, shrink the width of RG1 so it is the perfect size for all of your tabs. Now shrink GROUP 2’s width so its right side is 20px from RG1’s right side.
Quick note: When the user scrolls horizontally, the little scroll bar appears towards the bottom of the repeating group. To avoid the bar covering up text, add an extra 10px - 20px to RG1’s height.
Hope this makes sense. Go step by step and you should be good!
Daniel
1 Like
Awesome. I will give it a try!
Thank you!
1 Like
I am working on this now and adding it to a mobile page. My group 1 is only 50 H. I am wondering if I should still make my margins 20px?
also, should Group 2 be the same size as Group 1?
I was able to create a horizontal menu with these instructions, but I couldn’t make it responsive. Any advice there?
Thank you.