Streaming live at 10am (PST)

Nav - Smaller desktop resolution issue


#1

Hi,

When the screen size drops below 1056 width, the nav drops out of position and below the logo See attached). The size is between desktop and Tablet.

Any ideas how to resolve this? Maybe the nave goes to responsive below 1056?

Thanks

Darren


Here is my site Read-Only:
https://preview.webflow.com/preview/prospex?utm_source=prospex&preview=f68b140db39b75485a7e1421d00b75f9


#2

Hi Darren,
Awesome site :slight_smile: 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


#3

Hi Alfie,

Thanks for the response (and the site feedback :blush:) - I will have a play and see what I can get working.

Have a great day.

Darren


#4

Hi @thinkrandom,
you may try this type of custom code:

<style>
        @media screen and (max-width: 1056px) {
        .nav-link-grey { font-size: 12px; }
   }
</style>

Put it here:

Set font size you want, or another CSS parameter if you want. It’s up to you. You have tu publish the site to see the result.

Hope it will help! Tell me if it worked :wink:


#5

Hi 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?

Many thanks


#6

Hey @hellomalek

Edit - just revisited. I got this to work, the screen width is 1177px which is when I want the burger menu to be displayed instead of the desktop Nav.

I got your code to work but just means that it drops to the line below at a smaller screen width.

Any ideas how to get the Tablet view / Burger menu to appear at 1177px?

Many thanks

Darren


#7

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…

@media screen and (max-width: 1177px) {

}


#8

Thanks Alphie.

I understand the media query max width, but what follows that to get the burger menu to show? (Sorry if it’s obvious, I maybe missing a trick).

Darren


#9

Sorry my bad :frowning:

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.


@media screen and (max-width: 1177px) { .w-nav[data-collapse="medium"] .w-nav-menu { display: none; } .w-nav[data-collapse="medium"] .w-nav-button { display: block; } }

I hope this works please let me know! :smile:


#10

thanks Alphie - I can see you have gone to some effort!

I have applied it to the page but nothing happening? Please see read only below if that helps.

Appreciate it.

Darren

https://preview.webflow.com/preview/prospex?utm_source=prospex&preview=ac3b28c58e2ee680782dc7c18aca4e4d


#11

Hey, no worries!

If you change the open/close tags finger crossed, they are for JS - try the code block in the pic

image