[Resolved] Adding horizontal scrolling…. =)

[Luis]

Hi guys,

Keep up the great work and support. The support / forum alone has been worth every dollar. =)

I am using the READ style blog theme with some tweaking of my own.

In mobile viewing, I am hoping to allow the category links under the header to overflow horizontally to allow something similar to this website under mobile viewing (abc.net.au/news) where ‘Just in’ ‘Coronavisrus’ etc etc can be scrolled right and left.

Is there a relatively clean and simple way to do this?

I am happy to redo that whole container if need be.

Thanks in advance!

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Luis]

Hi David,

That worked like a charm. =)

Thanks!

[David]

Awesome – glad to hear that!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Luis]

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!

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Luis]

Thanks David.

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

Cheers!

[David]

You’re welcome….

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Luis]

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 🙂

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Luis]

Ok. Thanks David.

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

Cheers!

🙂

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts