Streaming live at 10am (PST)

Have site switch to tablet sooner (wider)


#1

So my fairly long navigation menu starts to get cluttered when collapsing the window and I'd prefer if the site just collapsed down to the "tablet" mode and switched to the hamburger menu sooner that it's default. Is there a way to customize at what screen widths the Tablet/mobile landscape/ mobile portrait kick in?


http://pluckers-horizontal.webflow.io/


How to change mobile nav bar width from 991px to 1024px
Automatic Hamburger menu on larger viewports
#2

Select the NavBar
Then select Navigator -> Settings
Locate Menu icon for
Switch to Desktop

The problem.. is Mobile Navbar will always be visible then.

Your traditional Desktop Navbar will no longer display.

The only other way around this is through jquery to detect the width the screen.

However, the width of screen is not always a valid...

So another way to accomplish this is via jquery detecting an element such as a div on the form.


#3

Hey @Jordan_Horstman. Please share a read only link so that we can observe the menu structure more easily.


#4

https://preview.webflow.com/preview/pluckers-horizontal?preview=d74cd1542ea4586fae51e802c709c7fe

Here is the read only link. Basically I don't want to change any of the functionality, it's simply when you resize the screen, it doesn't kick in with the hamburger menu quick enough.

Thanks!


#5

So I'd like for it to collapse down here

But it wait's until it's sized further down to here


Thanks again for the help!


#6

Alright. Give me a few mins. I will give you a code to put in your section. Just a shot in the dark. I want to test it out first.


#7

Here you go champ;

<style>
@media screen and (max-width: 1250px) {
  .w-nav[data-collapse="medium"] .w-dropdown,
  .w-nav[data-collapse="medium"] .w-dropdown-toggle {
    display: block;
  }
  .w-nav[data-collapse="medium"] .w-dropdown-list {
    position: static;
  }
  .w-nav[data-collapse="medium"] .w-nav-menu {
    display: none;
  }
  .w-nav[data-collapse="medium"] .w-nav-button {
    display: block;
  }
}
</style>

The sweet spot is about 1250px. So paste the above code in your site's <head> section and you should be good to go. Let me know once/if it works. :slight_smile:

EDIT: Works


#8

that works too...
why'd you have to make it so easy for him ? :wink:


#9

I guess I feel the pressure he's under to get it fixed.


#10

Thanks dude! This is awesome. I kinda am under pressure :slight_smile: I'm trying to bring our website in house and I want to show them we can do it with Webflow ASAP before they go third party.

Thanks again, works like a charm!


#11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.