Adding horizontal scrolling.... =)

Hi there,

try adding this CSS:

@media(max-width: 599px) {
    .gb-grid-wrapper.overflow-scroll {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 50%;
        flex-wrap: nowrap;
    }

    .gb-grid-wrapper.overflow-scroll>.gb-grid-column {
        min-width: 120px;
        scroll-snap-align: center;
    }
}

Then select the Grid Container - thats the outer wrapper block, and in Settings > Advanced -> Additional CSS Class(es) add: overflow-scroll

Hi David,

That worked like a charm. =)

Thanks!

Awesome - glad to hear that!

Okay after trying for a bit.... I have one last question, which should help someone else also. =)

What's the best way to add some gradient overlay to the right side of that 'menu' in mobile view only? To give the same effect you see in the above example (abc.net.au/news)?

Thanks!

That site uses some Javascript to accomplish that.
There is pure CSS method provided in this Code Pen:

https://codepen.io/matthewbeta/pen/fzoHI

However you would need to re-construct the 'navigation'.
I would do something like this:

1. Add a Container Block, and give it a class of overflow-scroll
2. Insert a Buttons Block, and create a number of inline Buttons ( no need for the Grid Block here ).
3. Add this CSS:

@media(max-width: 1599px) {
    .overflow-scroll>.gb-inside-container {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 50%;
        flex-wrap: nowrap;
        background-image: -webkit-gradient(linear, left top, right top, from(white), to(white)), -webkit-gradient(linear, left top, right top, from(white), to(white)), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.25)), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.25)), to(rgba(255, 255, 255, 0)));
        background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
        background-position: left center, right center, left center, right center;
        background-repeat: no-repeat;
        background-color: white;
        background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
        /* Opera doesn't support this in the shorthand */
        background-attachment: local, local, scroll, scroll;
    }

    .overflow-scroll .gb-button-wrapper {
        flex-wrap: nowrap;
    }

    .overflow-scroll .gb-button {
        min-width: 120px;
        scroll-snap-align: center;
    }
}

Please note that this shadow method does not apply to some older browsers.

Thanks David.

If you guys have a tip jar setup anywhere, just let me know. ;)

Cheers!

You're welcome....

and we do :)
https://generatepress.com/ongoing-development/

Hi David,

I had a decent play around with the code today, but I'm a bit stuck now... thinking about the cleanest way to approach this.

The fading works great but sits underneath the button colour. I thought about clearing the button colours and setting the container background as my colour but that gets over-ridden by the CSS. So I can probably adjust the CSS colour codes to achieve this.... Is there an easy way somewhere to test/tweak the web-gradient and linear gradient code you've given here?

Or is there maybe something else I can do?

Thanks a million :)

Aside of using JS there isn't a sound solution to create the shadowing affect.
The alternative would be to make it so the button min-widths always expose a little of the overflowed menu items so the use has a visual queue there is more buttons.

Ok. Thanks David.

I will think about my colour choices and go from there.

Cheers!

:)

You're welcome