Side Scrolling Issue
I have fixed these issues before but this one has me stumped. As soon as I apply flexbox to the nav bar links and I resize to a certain point, the about link overflows to the right instead of resizing. I have tried the grid repeat auto-fit feature with grid-template-columns after I changed the nav>ul from flexbox to grid and everything I can think of and nothing is stopping it. I have not used media query because I feel there is a way to fix it without doing so.
All help is appreciated.
https://codepen.io/Donald-Rankin/pen/NWJqaVb
21 Replies
sorry could you clarify what behaviour you are wanting / expecting?
when you resize the window the nav items get compact and are as close to each other as they can be
what are you wanting the 'about link' or the <nav> to be doing when the window is smaller than the content width?
Well on my screen the about link gets cut off and is most or all is hidden once I shrink chrome to the smallest size
on the x axis that is
Do you have a live site rather than codepen? I want to say it's because there's overflow somewhere but not sure if it's because of codepen or your code
so are you wanting the menu to
a ) shrink into a hamburger ?
b) wrap the 'about link' (+ subsequent links as the screen gets smaller) onto the next line?
c) show an elipsis?
No I just wanted it to size up but I am just going to make it a hamburger menu at certain sizes/
the links were shrunk down to their minimum sizes
if you want the links to get closer, you would need to remove the padding.
accessibility guidelines wcag 2.(something) requires a bit of space between interactive elements,
without looking it up I believe it is somewhere between 20 -24px between at a minimum to allow people to identify what they are pressing
Thanks but when I set the padding and margin to 0 it still did the same thing
The about gets cut off. It breaks.
This is in chrome
You may still have sidescrolling even if you had a hamburger menu depending on the rest of your code , if the container with "trim those hedges.." isn't responsive and squeezing everything down
If I turn off the flex box and the menu is in a column I don't have the sidscrolling
1. if you turn the padding off of the a links then you can get them right next to each other
2. at this point the font size in the nav of 2em prevents them from getting smaller.
if you change that to something like
font-size: clamp(1rem, 0.5rem + 2vw, 2.5rem); then they can get smaller down to 1rem
3.
You need to fix your grid--template-rows in #container : maybe something like - grid-template-rows: repeat(auto-fit, minmax(50px,1fr));
this all gets you down to around 320px with everything in viewOh good then you can use clamp (which you should on all the text anyway) , and for the menu is there a reason you aren’t implementing a hamburger menu of some kind ? You’re grappling with this nav bar so much, seems like a good solution, especially if there are more pages added in the future. You could also use submenus with your current links so you have three main links and a couple other links in a submenu
Thanks a lot! That fixed it
I am actually working on a hamburger menu, but it is my first one and I'm having some issues.
I did not realize how much of a headache it would be to get it in the correct position and to get it to function.
https://codepen.io/Donald-Rankin/pen/NWJqaVb
There are many mistakes
there are a few, did you want me to walk you through the fixes?
I have 30 min or so
is your plan to use the checkbox to see if the hamburger menu has been clicked or not instead of using JS to implement functionality? youve made some good progress
I don't know js yet
So yes the checkbox is for the hamburger menu
sorry I was afk