- This topic has 11 replies, 2 voices, and was last updated 3 years, 4 months ago by David.
-
AuthorPosts
-
November 14, 2020 at 10:21 pm #1531706Luis
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!
November 15, 2020 at 7:04 am #1532332DavidStaffCustomer SupportHi 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
November 15, 2020 at 9:25 pm #1532885LuisHi David,
That worked like a charm. =)
Thanks!
November 16, 2020 at 1:46 am #1533033DavidStaffCustomer SupportAwesome – glad to hear that!
November 17, 2020 at 8:07 pm #1535528LuisOkay 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!
November 18, 2020 at 7:22 am #1536346DavidStaffCustomer SupportThat 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.
November 18, 2020 at 8:09 pm #1536988LuisThanks David.
If you guys have a tip jar setup anywhere, just let me know. π
Cheers!
November 19, 2020 at 12:33 am #1537146DavidStaffCustomer SupportYou’re welcome….
and we do π
https://generatepress.com/ongoing-development/November 20, 2020 at 6:55 am #1539064LuisHi 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 π
November 20, 2020 at 12:04 pm #1539395DavidStaffCustomer SupportAside 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.November 20, 2020 at 10:25 pm #1539662LuisOk. Thanks David.
I will think about my colour choices and go from there.
Cheers!
π
November 21, 2020 at 4:30 am #1539836DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.