[Resolved] buttons over the edge

[Benny]

Hey there, is it possible to scroll buttons over the edge of the mobile display? So that they are horizontally scrollable?

Screenshot of figma –> https://ibb.co/kxHN4BF

(PS: I use GP Pro, Generateblocks Pro, and if needed i use this slider plugin –> https://wordpress.org/plugins/block-slider/)

[David]

Hi there,

to add the ‘nav buttons’ to slide them would require some Javascript and custom development. If thats required then i suggest the plugin.

If its not required then we can provide some CSS to do that. Let me know,

[Benny]

I split the buttons onto several slides but there flexbox grows the button-container to 100%. How can i limit the button-container with just one button in it to the width of this one button? After that it should be piece of cake but didnt get there on my own 😀

Thanks for your support!

[David]

Can i see the site ?

[Benny]

The mobile version of this –> http://akademis.w4km8elg6q-ewl6nwykw652.p.runcloud.link/worth-school/

I would copy copied the buttons into a new container only visible on mobile and hide the desktop button containing container.

[David]

Some CSS like this:

@media(max-width: 768px) {
    .wp-block-cwp-block-slider ..gb-button-wrapper {
        display: inline-flex;
    }
}

[Benny]

Now the buttons just fills up the whole space 😀

[David]

Oops – edited the above:

https://generatepress.com/forums/topic/buttons-over-the-edge/#post-2051944

Not sure if that will fix it as the Slider is also defining some widths….

[Benny]

Works if i unset the width of slick-slide but there is another problem i have to fix and i rather stick to another design then. But thanks for your support!

[David]

No problems – hope you find what you need !

[Author]

Posts