No two-line menus Posted on May 24, 2021 by Tagged: Menus Viewing 2 posts - 1 through 2 (of 2 total) Author Posts December 8, 2020 at 1:41 pm #32009 Peter MerholzGuest How can I make it so that if a menu breaks to two lines, it is instead replaced by a hamburger icon? December 8, 2020 at 1:43 pm #32020 Jesse OwensKeymaster Hi Peter- We can use some screen-width media queries to adjust the breakpoint where the hamburger is displayed. In my testing, your menu splits into two lines at the 1200-pixel mark, so you can use this code in your Customize > CSS/JS Editor menu: @media only screen and (min-width: 768px) { .standard-menu-enabled label[id$=-menu-btn] { position: relative; left: 0; top: 1px !important; display: -ms-flexbox; display: flex; -ms-flex-item-align: end; align-self: flex-end; white-space: nowrap; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 2; } .standard-menu-enabled input:checked~.sm-clean, .standard-menu-enabled input:not(:checked):not(.hidden)~.sm-clean { display: none; } } @media only screen and (min-width: 1200px) { .standard-menu-enabled label[id$=-menu-btn] { position: absolute !important; top: -99999px !important; } .standard-menu-enabled input:checked~.sm-clean, .standard-menu-enabled input:not(:checked):not(.hidden)~.sm-clean { display: flex; } } Author Posts Viewing 2 posts - 1 through 2 (of 2 total) The topic ‘No two-line menus’ is closed to new replies. Post navigation Will BoldGrid Work on my wordpress.com Site? →