- This topic has 7 replies, 2 voices, and was last updated 4 years, 3 months ago by
.
-
Posts
-
Hi,
I am trying to make a sliding / scrolling button display like the one linked below. It doesn’t scroll on desktop, but it scrolls horizontally on mobile instead of the buttons stacking on top of each other. Is this possible?
Link to the website trying to duplicate – *Popular cabin amenities in Hot Springs* Section
https://www.airbnb.com/hot-springs-ar/stays
Link to the test page I have made to try to make a similar style / layout. Buttons stack on top of each other in mobile
https://orprops.com/popular-home-choices/
Thanks
Customer Support
Hi Austin,
Try this CSS:
.gb-button-wrapper.gb-button-wrapper-ed7ca6cc { overflow-x: auto !important; flex-wrap: nowrap; padding: 20px 0; }Awesome thanks Ying. A couple of questions.
Will this apply anytime I use this style of button build in the website?
Is it possible to remove the scroll bar underneath while scrolling?
And is it possible to add Icons to the buttons above the words like the example? If not, understandable. Thanks again for the help.
Will this apply anytime I use this style of button build in the website?
No, the CSS is targeting the specific GB button wrapper.
But you can add a custom CSS class to all the buttons wrappers that you want them to scroll horizontally, for eg.
scroll-buttons.Then change the CSS to:
.gb-button-wrapper.scroll-buttons { overflow-x: auto !important; flex-wrap: nowrap; padding: 20px 0; }Is it possible to remove the scroll bar underneath while scrolling?
Try this CSS:
.gb-button-wrapper::-webkit-scrollbar { display: none; } .gb-button-wrapper { -ms-overflow-style: none; scrollbar-width: none; }is it possible to add Icons to the buttons above the words like the example
YES!
GB buttons have the icon option, you can use the icons from GB library, you can also use custom icons, just need to paste the
SVGcode into it.Once the icon is added, we can help with some CSS to move the icon up.
Let me know 🙂
Thanks Ying. The first CSS code worked fine, as that is what I needed to add scroll to only certain areas. Is it possible to adjust the second css though as it keeps cutting off the bottom of the buttons and drop shadow? I wasn’t sure it possible to just make the scroll bar color invisible. It doesn’t have to be deleted if not seen if that makes sense. Thanks
You could try to increase the padding in the first CSS, or try this CSS instead:
.gb-button-wrapper::-webkit-scrollbar { opacity: 0; } .gb-button-wrapper { -ms-overflow-style: none; scrollbar-width: none; }Got it working, Thanks Ying. I will close this topic and open a new one for the icons in the buttons and CSS to move them to the above the words.
Great!
You are very welcome 🙂
- You must be logged in to reply to this topic.
