horizontal scrolling for offcanvas
I'm implementing (or working on implementing) the News homepage challenge from FEM.
I do have trouble on getting the stuff right with the offcanvas menu.
It's hiding correctly like I want it to, however there is still some horizontal scrolling available (unlike what I want)
How should i fix this?
Code can be found at https://github.com/thomashertog/frontendmentor-news-homepage
7 Replies
A reproducible demo on codepen.io, or at least a short video showing the issue more clearly would help. Not everyone has done that challenge so it's difficult to imagine what's really supposed to happen vs what's happening in your code.
Please read see the post on how to ask good questions: https://discord.com/channels/436251713830125568/1022288836715356180
my bad, there is a live demo available on https://thomashertog.github.io/frontendmentor-news-homepage/
when i view it at a viewport width of 375px, it is possible to scroll horizontally to the place where the offcanvas menu is hiding
I want it to be hidden accessibly, yet no horizontal scrolling should be available
I think the problem is with the
display: flex on the header which is assigning some space for the navbar, regardless of whether you later want to hide it or not. One solution would be to move the nav element up a level in the structure so it becomes a sibling with header. Then, assign position: relative to the wrapper.
Another option that is probably quicker is to give the body a property of overflow-x: hidden. This simply prevents the scrolling horizontally and seems to work without additional tweaks, but of course doesn't really address the cause of the overflowright, that flex container might be the culprit, i'll try reworking it into a structure that is a better fit
and note this one down for next time (because this isn't the first time I'm trying to solve these kind of issues)
And it won't be the last I guarantee it š Even when you think you understand CSS, if you don't work regularly with it you start forgetting these little things
that's my biggest problem
not working with it regularly
š¦
I love to work with CSS though there is little chance at my current employer to do so
and I don't have the courage/energy/... to jump over into a new job
just as a follow-up @joao6246 the overflow did nothing to fix the problem
I solved it by removing the transform: translate property, i can still see how i'll fix it with some animation for the fly-in
No worries, these things will start to come naturally and sooner than you know you'll be able to spot these issues more quickly š In the end it's usually the same rules for most of the stuff.
Glad it worked... but did you change something? It did work for me when I applied the
overlow-x: hidden. Anyway that's usually not the best solution anyway, so if you can find an alternative way to hide/show the nav menu that's better.
I suggest playing with transform: scale() which gives a nice little animation, plus avoid issues with ghost clicking (where the element if visually invisible but can still be clicked). There are tons of options, YouTube is your friend for this one.