[Resolved] Adding horizontal scrolling…. =)

Home Forums Support [Resolved] Adding horizontal scrolling…. =)

Home Forums Support Adding horizontal scrolling…. =)

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1531706
    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!

    #1532332
    David
    Staff
    Customer Support

    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

    #1532885
    Luis

    Hi David,

    That worked like a charm. =)

    Thanks!

    #1533033
    David
    Staff
    Customer Support

    Awesome – glad to hear that!

    #1535528
    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!

    #1536346
    David
    Staff
    Customer Support

    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.

    #1536988
    Luis

    Thanks David.

    If you guys have a tip jar setup anywhere, just let me know. πŸ˜‰

    Cheers!

    #1537146
    David
    Staff
    Customer Support
    #1539064
    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 πŸ™‚

    #1539395
    David
    Staff
    Customer Support

    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.

    #1539662
    Luis

    Ok. Thanks David.

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

    Cheers!

    πŸ™‚

    #1539836
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.