Change menu breakpoint

Hi @petbuc16,

The change is done in the 1000px media query in style.css, and you could overwrite the display properties set at that point in a child theme. The code starts at line 4437 in the latest version of Chaplin. You could add the following to Appearance → Customize → Extra CSS:

@media ( min-width: 1000px ) {

.no-js .main-menu-alt-container,
.disable-menu-modal-on-desktop .main-menu-alt-container {
	display: none !important;
}

.disable-menu-modal-on-desktop.disable-search-modal .header-toggles,
.disable-menu-modal-on-desktop .nav-toggle {
	display: block !important;
}

.disable-menu-modal-on-desktop:not(.disable-search-modal) .search-toggle .toggle-text {
	display: block;
}

}

@media ( min-width: 1200px ) {

.no-js .main-menu-alt-container,
.disable-menu-modal-on-desktop .main-menu-alt-container {
	display: block !important;
}

.disable-menu-modal-on-desktop.disable-search-modal .header-toggles,
.disable-menu-modal-on-desktop .nav-toggle {
	display: none !important;
}

.disable-menu-modal-on-desktop:not(.disable-search-modal) .search-toggle .toggle-text {
	display: none;
}

}

Adding that code should move the breakpoint from 1000px to 1200px.

— Anders

This is so close to solving this, but there’s one niggling little thing that I cannot seem to track down. Between 1200-1000px the Search and Menu links are a bit wonky with the word “Menu” appearing above the hamburger icon (left-aligned) and seemingly aligned to the top of the div. But at 1000px, the Search and Menu links line up with each other in the middle of the div and look as they should. Can you point me in the right direction to address this?

FOUND IT!

For anyone else who might pass by …

@media ( min-width: 100px) and (max-width: 1200px) {
  .header-toggles .toggle.nav-toggle {
    display: flex !important;
  }
}