Navbar on desktop - ipad pro breakpoint

Hello,

My navbar is not perfect while on Desktop - iPad pro breakpoint. The logo becomes small and invisible, and some elements goes outside the screen.

I tried to wrap the nav menu element but I’m not happy with the result.
What should I try to make my navbar good looking on iPad Pro breakpoint (smallest size on desktop).

Here’s my read-only link : https://preview.webflow.com/preview/cikisi-e35f6e?utm_medium=preview_link&utm_source=designer&utm_content=cikisi-e35f6e&preview=b771597a9f0d3c354485838cea16ad13&workflow=preview

Thanks a lot fellow webflowers!

Hey @tvog let’s take a look at your site and see what can be done.

First we can clearly see that the .5fr is becoming so small compared to the other columns of 2.25fr and 1.25fr.

We can make the grid columns more responsive by using the min/max option. The max becomes the existing width of .5fr but now we can set a minimum size for this column. I randomly chose 6rem in this example but you can choose what best fits the brand and design.

Now let’s apply a min/max to the other columns but this time use minimum content. Now for the final fix, you’ll need to adjust the size of the content within these columns to avoid content overflowing the grid or creating 2 lines of text.

Hope this helps get you going towards a solution.

Thanks so much @matthewpmunger - I learned quite few things here.

I can’t really delete content in the navbar. What can you suggest here?

You shouldn’t need to delete any content. Try adjusting the font size and spacing of the content until everything fits and the design feels balanced.