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?
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.
With some deeper searching I found a snippet that does exactly what I described.
Instructions:
Paste this code within the HTML tag in the Custom Code section of your Webflow Project Settings.
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.
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.
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’m trying to make that nav menu (tablet version) appear on specific screen-each screen that is smaller than <1240px. I tried with your custom code and it doesn’t work for me.
I also tried with following code, but no luck: @media screen and (max-width: 1150px) {
.navbar__wrapper[data-collapse=“medium”] .navmenu__dropdown,
.navbar__wrapper[data-collapse=“medium”] .navmenu__button {
display: block;
}
.navbar__wrapper[data-collapse=“medium”] .navmenu__link-list {
position: static;
}
.navbar__wrapper[data-collapse=“medium”] .navbar__navmenu {
display: none;
}
.navbar__wrapper[data-collapse=“medium”] .navmenu__button {
display: block;
}
}
