I am needing some major help with my custom nav bar. I can’t seem to get it to be responsive on different screen sizes for desktop (mobile will go to the hamburger menu). When I adjust the size of the screen, the wording gets smushed and falls off of the page. Is there a better way for me to go about doing this? I have tried with both flexbox and grid and I can’t seem to achieve what I want.
My goal is to have all of the Menu options spaced evenly and set to the far sides of the screen with some padding on both left and right. When the screen gets smaller, just have them move closer to the logo, and then again, tablet and smaller will go to the hamburger style menu.
From a user experience standpoint, people are very used to using hamburger menus on mobile. You also have multiple dropdown that will get extremely messy on mobile if you don’t use the hamburger. The issue with responsiveness is there are a million different screen sizes so if you try to position your links and dropdown on mobile, it likely won’t work on all devices. Which is why the hamburger is there.
I understand that. That’s not my issue. I plan to use the hamburger menu from tablet and down. What I’m asking, is how to get my nav bar on desktop to be responsive. when i adjust the screen, the menus are falling off of the page