Hi Darren,
Awesome site To make the nav items stay in the original positioning without overflowing when they run out of space you would have to scale the text or the logo. If you set VW on the logo it will scale proportionate to the browser width. Same goes with the text, set a VW value instead of px/rem/em etc with a % line-height and the text will also scale up or down proportionately. Hope it helps!
Alphie
Had a play with this set up but not keen on the scaling solution. I thknk my preferred solution would be for the Burger menu to feature (tablet set up) when the browser scales below the set size.
Any guidance on the CSS / best way to achieve this?
Hey Darren, you would just need to adjust the media query helloMalek advised to kick in at the specified max width of 1177px so any value below or including 1177px shows the burger menu…
Just created a quick version, I’m not normally using the nav widget so there may be a quicker, more correct or easier way of doing this but it’s working on my test project, browser screen shot attached.
Export the code, webflow generates two .css files one with your styles and one with standard wf default styles. I’ve found the media query that controls the change of the nav from full to burger copied it re-inserted it as custom code on my page with the new max-width of 1177px which works fine, there shouldn’t be an issue with clashing media queries as we are adding a new query @ 1171px instead of overriding the one in the external css set to 991px.
This being said the query below is embedded via custom code onto that particular html page so it will only work on that page if you are using the nav across multiple pages you would either have to add the below to each page as custom code or wait till you export the files and manually add it to the external stylesheet each export.