Webflow Responsive Breakpoints

Glenn Blog Leave a Comment

These are the standard Webflow Responsive Breakpoints:-

@media screen and (max-width: 991px) {
/* Your responsive CSS */
}
@media screen and (max-width: 767px) {
/* Your responsive CSS */
}
@media screen and (max-width: 479px) {
/* Your responsive CSS */
}

With some digging it is possible to change the Responsive Breakpoints for the Webflow Menu by editing this CSS. Say for example that we want the main menu to display after 767px and not 991px (standard). We simply reverse edit the 991px declaration:-

@media screen and (max-width: 991px) {
 .w-nav[data-collapse="medium"] .w-nav-menu {
/*display: none;*/
display: block!important;
 }
 .w-nav[data-collapse="medium"] .w-nav-button {
 /*display: block;*/
 display: none!important;
 }
}
@media screen and (max-width: 767px) {
 .w-nav[data-collapse="small"] .w-nav-menu {
 display: none;
 }
 .w-nav[data-collapse="small"] .w-nav-button {
 display: block;
 }
 .w-nav-brand {
 padding-left: 10px;
 }
}
@media screen and (max-width: 479px) {
 .w-nav[data-collapse="tiny"] .w-nav-menu {
 display: none;
 }
 .w-nav[data-collapse="tiny"] .w-nav-button {
 display: block;
 }
}

That’s very rudimentary and a more responsive menu in Webflow should be on the cards, but with the !important CSS declaration this will work alongside some further CSS styling edits of the menu for your needs.

About the Author
webflow responsive breakpoints Webflow Responsive Breakpoints 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.