Create Scrolling button menu in Page Content for Mobile Devices

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 :)