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
Coder_Carl
Coder_Carl11mo ago
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?
DrViagrin
DrViagrinOP11mo ago
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
vince
vince11mo ago
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
Coder_Carl
Coder_Carl11mo ago
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?
DrViagrin
DrViagrinOP11mo ago
No I just wanted it to size up but I am just going to make it a hamburger menu at certain sizes/
Coder_Carl
Coder_Carl11mo ago
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
DrViagrin
DrViagrinOP11mo ago
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
clevermissfox
clevermissfox11mo ago
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
DrViagrin
DrViagrinOP11mo ago
If I turn off the flex box and the menu is in a column I don't have the sidscrolling
Coder_Carl
Coder_Carl11mo ago
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 view
clevermissfox
clevermissfox11mo ago
Oh 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
DrViagrin
DrViagrinOP11mo ago
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
Coder_Carl
Coder_Carl11mo ago
there are a few, did you want me to walk you through the fixes? I have 30 min or so
clevermissfox
clevermissfox11mo ago
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
DrViagrin
DrViagrinOP11mo ago
I don't know js yet So yes the checkbox is for the hamburger menu sorry I was afk
Coder_Carl
Coder_Carl11mo ago
all G, happy to walk you through in voice chat or pm rather than typing back and forth. will be quicker
DrViagrin
DrViagrinOP11mo ago
I would love to do voice chat which one do we use
clevermissfox
clevermissfox11mo ago
just fyi some of your properties arent being applied because your selector for pseudo elements is missing a colon. you have element:before instead of element::before
DrViagrin
DrViagrinOP11mo ago
oh yeah thanks all before and after need two right?
Coder_Carl
Coder_Carl11mo ago
unsure if you can join voice-chat?
DrViagrin
DrViagrinOP11mo ago
You mean in this channel? It let me in the private chat just now
Want results from more Discord servers?
Add your server