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…
|
1 2 3 4 5 6 |
add_action( 'wp_enqueue_scripts', 'remove_responsive_nav', 1000 ); function remove_responsive_nav() { wp_dequeue_script('twentytwelve-navigation'); wp_deregister_script( 'twentytwelve-navigation' ); } |
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:
|
1 |
<meta name="viewport" content="width=device-width" /> |
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…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#site-navigation { width: 100%; } .menu-main-container { float: none; margin-top: 0; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { display: inline-block; } .main-navigation li { float: left; } .nav-menu { float: none; } |
And that’s it!
