Prevent menu bar collapsing in wordpress underscores theme

Question

I am using the Wordpress underscores theme, and it works well. My menus are generated using: wp_nav_menu(...)

However I am seeing in the default layout that when I view on an IPad Pro the top menu is collapsed (displaying with the lines as if I were viewing on a smartphone). On a regular laptop screen the layout is fine.

Is there something I can adjust in the .css to prevent the collapse either completely (I am not interested in displaying on a smartphone) or specify that menu should collapse only under a width of 1200px.

Answer 1

Yes, in the style.css file you can find the following code:

@media screen and (min-width: 37.5em) {
   .menu-toggle {
       display: none;
   }

   .main-navigation ul {
       display: flex;
   }
}

What it does is make the list inside the main-navigation nav tag in your heaader.php file display with the property flex and hide the menu button toggle in devices with width adobe 37.5em.

If you don't want to make various changes in the styles of your theme you can modify the value inside the @media query. For example, if you want that collapse in devices under 1200px you can set:

@media screen and (min-width: 1200px) {
   .menu-toggle {
       display: none;
   }

   .main-navigation ul {
       display: flex;
   }
}