Problem with responsive navbar
I having this issue where when I open my website on a phone (second picture), the navbar doesnt fit, the hamburger menu is way in the right (third picture). But when I scale my window down to phone size on pc (first picture), every thing works, the about me and other A tags go into a menu. Any idea why that might be?
25 Replies
i even added a max width and overflow hidden
Have you set the viewport meta tag?
You should have something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">yh
i tried to add
max-width to nav to try and fix it and this is the result:
If possible I suggest that you set up a codepen or similar so that somebody can test it out and be able to help better.
the code is a bit messy
and im not sure how to replicate the problem on code pen
since the problem happens when i open it on phone
opening your codepen on the phone doesn't appear to show any issues.
yh the problem happens when i try to view on phone or tablet
the content is missing, which can be the difference
can you update it to include the content as well?
i updated it but i only managed put the landing page in, since the other content are generated based on a jason file
i cant reproduce it
nor can I
Not related to the issue but I would recommend that you use a button for the hamburger icon and that you make the clickable area much larger. (I realize that it may just be like this for your quick demo)
maybe its to do with the device, i have s23 ulta and the nav is 2x wider then all the other elements when i open it there
try it on another device
i just tried with inspect element and different device, same result for most device
it only worked fine on the ipad pro and air
and also the zenboon fold
im also using lenis, gsap and split type, can those cause any problem?
yh i fixed that now, thanks for letting me know tho
if it happens to you but not us, when we try the same thing, then the missing content is the cause
yh that makes sense but i dont see why the other content down make the nav bar grow
ill just send over all the css just in case someone see anything there
we're not computers, we can't do much with 12kb of css
even computers can't do anything because it requires html to be useful
ik i just put it there just in case someone sees something