How to make nav menu appear at specific screen width, before the tablet breakpoint?

Hello Webflow people,

I feel that the tablet breakpoint in Webflow comes too late. It’s difficult to design a nav bar that looks right at both the widest and narrowest ends of the breakpoint. I’m very frustrated by the inability to define my own breakpoints - if I could do that then this problem would be solved.

I would like to make the nav menu (hamburger menu) show up when the viewport is a certain pixel width. I know it shows up automatically at the tablet breakpoint, but I want it to show earlier.

In other words I want my nav bar to act like the tablet breakpoint starts at 1150px rather than 992px.

Can anyone point me toward some custom code that can make this work?

1 Like

I needed this one time too. Here is the custom code wrote and used.
Webflow menu toggle mobile for iPad (codepen.io)

Thanks for this. It looks like too technical of a solution for me as I am not familiar with writing code and it appears your solution involves manually writing my own CSS styling.

I’m hoping theres a simpler solution, like a code snippet and/or a tutorial.

Nope. That is the only solution.

With some deeper searching I found a snippet that does exactly what I described.

Instructions:

  1. Paste this code within the HTML tag in the Custom Code section of your Webflow Project Settings.
  2. Set the pixel max-width in the code below as desired. The hamburger nav menu will show when the screen is below that width. For me it was 1150 px. The tablet landscape breakpoint is at 992px. This doesn’t change the breakpoint, just shows the nav menu early.
<style>
@media screen and (max-width: 1150px) {
  .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>

Tested and works! Credit to AlexManyeki

1 Like

what do you think the code did in the codepen?

Alex’s code is available as a snippet, solves the problem much more easily, and doesn’t require writing CSS to style the nav bar.

For individuals like me with limited code experience, your solution was not accessible at all. It may have worked for you, and I thank you for sharing, but I resent that you confidently stated that there was no other solution when you didn’t know that to be true.

The CSS is the same. The only difference is yours was wrapped in a block which all CSS has to be in Webflow. So your lack of comprehension does not make something untrue. Have a nice day.

Can I ask a followup to this thread and your solution. I implemented this and it works great, but now I have a spot between 992 and 1125 (my typed in width) that there is no desktop menu and no mobile hamburger menu either one… I tried a min and max width of those two but that didn’t work.
I have a complex desktop mega menu that doesn’t look good under 1125 so I want to activate the webflow hamburger menu to show anything below 1125. I am using a custom svg inside in place of the icon but I don’t think this is the issue at all.

It sounds like there could be an error in the code that is not showing the menu when it should.

Try using this code and if it doesn’t work then you should post a read-only link to your project.

<style>
@media screen and (max-width: 1125px) and (min-width: 992px) {
  .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>

Hi There, I have a similar issue, I am trying to make the mobile nav menu appear at the breakpoint of 1242px, so the ipad view looks proper, this is what the error looks like, notice the menu is all scrunched up when the vw is between 988px and 1242px.

I tried putting the above custom code in the header of project settings, however it doesn’t work because the nav menus are labelled differently.

The Home Page Nav Menu is classed as [Navbar 2][desktop], which we want to disappear at 1242px

The Mobile Menu is in the symbol ‘mobile menu’, and classed as [Navbar 3], which we want to appear at 1242px.

Can someone help me madlib the following custom code to make this custom breakpoint function properly

<style>
@media screen and (max-width: 1125px) and (min-width: 992px) {
  .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>

Here is a Read Only Link
https://preview.webflow.com/preview/dcmadvisors?utm_medium=preview_link&utm_source=designer&utm_content=dcmadvisors&preview=769fc2ef6c7cf265b07344c95260591c&workflow=preview

Warmest Regards
JC