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
