Show WordPress toggle menu full screen mode, not just for mobile

This article was written by in September 15, 2014, & may not be posted on other sites!
Original source url for this article: Show WordPress toggle menu full screen mode, not just for mobile

Show wordpress toggle menu in full screen mode, not just for mobile.
Many of the WordPress themes has responsive menus, showing the whole menu and every menu link in full screen mode, but having a show / hide toggle menu for smaller devices like mobile phones. But what if you would like to have a hidden toggle menu for all screens? Full screen included. This is how to show WordPress toggle menu in full screen mode too, not just on mobile devices.

Show WordPress toggle menu full screen mode, not just for mobile

 

1. Find the wordpress codex for the main navigation menu

You should always work with a child theme when altering theme files in WordPress. The WordPress codex for the main navigation menu is probably found somewhere in header.php and looks something like this:
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
<?php //get_search_form(); ?>
</nav>
This is how the toggle menu works by default in WordPress
The mobile menu is hiding the menu list <ul> generated by this code
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
but showing the heading <h3> which is the trigger to show and hide the toggle menu on mobile devices (in this example). The full screen mode is doing the opposite, hiding the <h3> but showing the menu list <ul> as default. The toggle function is written in jQuery.

 

 

2. Adding css to show WordPress toggle menu full screen mode

Let’s start by showing the <h3> in full screen mode and hide the menu list <ul> just as already done for mobile devices. Add this css for full screen to have the same css as for mobile devices:
.toggled-on .menu-toggle:after {
content: "\25B2";
vertical-align: 2px;
}
.menu-toggle:after {
content: "\25B6";
font-size: 12px;
padding-left: 8px;
vertical-align: -4px;
}
.menu-toggle:after{
display: inline-block;
font: 16px/1 Genericons;
vertical-align: text-bottom;
}
.menu-toggle {
display: block;
}
ul.nav-menu, div.nav-menu > ul {
display: none;
}

 

3. Adding jquery to show / hide toggle functionality

Your WordPress theme already have a jquery function to toggle (show / hide) the mobile menu, but this functionality might probaby not work in full screen mode. The default jquery toggle function is probably triggered by the ID or class of the <h3>, in this case .menu-toggle

If you want to use the same toggle function for both mobile and full screen you can simply remove the class .menu-toggle to remove the default toggle functionality. OR you can keep the deafult mobile toggle and just add an extra function for the full screen mode.

Our own WordPress jQuery menu toggle function
Let’s add our own ID to the <h3> which will trigger a show / hide toggle function for both mobile devices and full screen mode. Replace the code in header.php
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
with
<h3 id="custom-menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
Add this jQuery function to add the same toggle functionality for both mobile and full screen mode.
<script>
jQuery(function ($) {
$( document ).ready(function() {
$("#custom-menu-toggle").click(function(){
$("#site-navigation ul").toggle(1500, 'linear');
});
});
});
</script>
With this solution, removing the .menu-toggle class all togehter, You might need to adjust the css in step 2 above.

 

 

Tips and Tricks to alter the toggle menu in WordPress

Make the cursor a hand when hovring the “Menu”
Add this css:
#custom-menu-toggle:hover{
cursor: pointer;
}

Change the text “Menu” on the trigger button.
Simply replace the code in the header.php
<h3 id="custom-menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
With for example
<h3 id="custom-menu-toggle"><?php _e( 'My custom menu', 'twentythirteen' ); ?></h3>

Remove the “Menu” button and replace it with an img or any other element
You can replace the menu trigger <h3> with any element you like, as long as you keep the ID #custom-menu-toggle, something like this for example:
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<img id="custom-menu-toggle" src="<?php echo get_stylesheet_directory_uri(); ?>/images/custom-img.png" />
<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
<?php //get_search_form(); ?>
</nav>

 

Spread the word

Facebooktwittergoogle_pluslinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *