Navigation bar - Change font size dynamically or convert to hamburger menu according to browser window size

Hello there! I'm building a website where the navigation is long and it folds down to the second line when I reduce the window size on a desktop. Is there a way to dynamically change the font size according to the window size or shrink it to a hamburger menu when it goes beyond a certain size? 

Thanks a ton in advance.

There are ways to improve that with a dynamic font sizes, can you share your website URL?

Thanks a ton, Ziggy. Here it is:

thealphasnapper2023.squarespace.com (password: alpha)

Try this Custom CSS:

@media only screen and (min-width:768px) and (max-width:1350px) {
  .header-nav-item {
    font-size: 1.2vw;
  }
}

Thank you, ziggy! But it still folds down to the second line when I minimize the window to like 25%.

Did you try adjusting the font size value? The 1.2vw seemed to work for me in testing, but that's never the same as actually installing it and testing it.

Honestly, the best way to prevent that from happing is to reduce the size of your logo, either universally or with a little code:

@media only screen and (max-width:1250px) {
  .header-title-logo {
    max-width: 35vw;
  }
}

Yes, That would need the logo to adjust dynamically as well. Let me try this one, Thank you!

This reduces the logo size, however, it doesn't do it dynamically. When the window size decreases to a specific extent it reduces the size of the logo. I think it can be handled by a few lines of code to handle different sizes. 

But which parameter represents the length and width of the window and which parameter represents the size of the logo?

Thanks again!

I set the maximum width that the dynamic logo code applies to, to 1250px, you can play with increasing this value to 1400px or higher, see what works.