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?
![No description](https://cdn.answeroverflow.com/1263198425529188485/image.png)
![No description](https://cdn.answeroverflow.com/1263198425764073603/image.png)
![No description](https://cdn.answeroverflow.com/1263198426036830413/image.png)
25 Replies
i even added a max width and overflow hidden
![No description](https://cdn.answeroverflow.com/1263199120399798353/image.png)
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
![No description](https://cdn.answeroverflow.com/1263203368273313903/image.png)
i tried to add
max-width
to nav to try and fix it and this is the result:![No description](https://cdn.answeroverflow.com/1263204400852238336/image.png)
![No description](https://cdn.answeroverflow.com/1263204418573041795/image.png)
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
![No description](https://cdn.answeroverflow.com/1263222607369732096/Screenshot_2024-07-17-20-54-39-63_40deb401b9ffe8e1df2f1cc5ba480b12.jpg)
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)