MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Disable Laurel's "Show Menu" mobile menu on larger screen sizes

Please note: This article is specifically for our Laurel theme. 



Full, side-by-side navigation menu


By default, Laurel's navigation menu will have its menu items display side-by-side on screen sizes that are 1400px and wider

When viewed on a screen that is less than 1400px wide, the navigation menu will automatically retract into a centered mobile menu with the words "Show menu" next to it. 


Centered mobile menu


This is done because of the nature of Laurel's default header layout. Because the top-bar area has to accommodate a logo image, a navigation menu, and social icons, the top-bar can become quite crowded as the screen size reduces in width. To remedy this, we've implemented the feature where the menu retracts into a mobile menu in order to save space and keep the top-bar nice and tidy. 

If you don't plan on having many menu items or your logo image is quite small, you may be able to fit in all of your top-bar elements without needing to display the centered mobile menu until you hit an even smaller screen width than 1400px. 

To give this a try, you can navigate to WP Dashboard > Appearance > Customize > Custom CSS > and insert this block of code:

@media only screen and (max-width : 1400px) {
#nav-wrapper { display:block; }
#mobile-menu { display:none; }
#slick-mobile-menu { display:none; }
}
@media only screen and (min-width: 942px) and (max-width: 1170px) {
#nav-wrapper { display:none; }
#mobile-menu { display:block; }
#slick-mobile-menu { display:block; }
}
@media only screen and (min-width: 768px) and (max-width: 960px) {
#nav-wrapper { display:none; }
#mobile-menu { display:block; }
#slick-mobile-menu { display:block; }
}
@media only screen and (max-width: 767px) {
#nav-wrapper { display:none; }
#mobile-menu { display:block; }
#slick-mobile-menu { display:block; }
}

Please save changes when finished. 

If you have a cache tool operating on your WordPress platform or on your web browser, please be sure to clear any caches. 

This code will have your full/side-by-side navigation menu appear on screen widths down to 1170px wide. When your screen width becomes less than 1170px wide, the mobile menu will appear.