For me, responsive menus are the next best thing since sliced bread… almost! Sometimes, I find a responsive menu is just overkill on a website… mainly because there are so few pages to begin with.

Recently, I re-created a theme for a client to make it responsive and WooCommerce compliant. Due to the layout of the site, I decided to start with TwentyTwelve as my parent theme. It had the layouts and typography I needed and required minimal customization on my end, meaning less compatibility problems in the future for the client.

The only issue was my client only has four pages total and they all fit nicely on the page, regardless of whether the site is viewed on a desktop or a mobile phone. Making the menu appear and disappear using a menu button was an extra unnecessary click, as these menu items are fine appearing in a single line, side-by-side.

So I set off to do the unspeakable…removing the responsive menu from the WordPress Twenty Twelve theme.

 

How To: Remove Responsive Menu

Here’s how I went about it:

Step 1: Create a Child Theme

Make sure you start with a child theme for any changes. It helps later on when you need to reference a line of code you may have deleted or you need to switch back to your parent theme to troubleshoot any issues.

Step 2: Dequeue and Deregister Navigation Script

The next step is to stop the mobile navigation from kicking in when viewing the website on a mobile device.

Add this code in functions.php…

This removes the navigation.js file from being loaded with the theme.

 

Step 3: Remove the mobile meta tag

In header.php, delete this line:

This removes the mobile meta tag from the theme.

 

Step 4: Update Media Queries for Max-Width: 600px

In style.css, make the needed edits to style your menu. Mine looked like so…

 

And that’s it!