Shero Support

How can we help?

Follow

Creating A Responsive Menu For Your WP Child Theme

To make sure your header in your child theme is responsive for mobile browsers, you want to follow 3 steps:

1.) Add this code to your child theme's functions.php file:

wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );

2.) Install the js/navigation.js file in your child theme

You can find a copy of the file here:

http://sherodesigns.com/wp-content/themes/shero/js/navigation.js

3.) Add Proper Navigation Code In your child theme's header.php

This is the code we use in between any custom divs you created to surround your nav:

           
                <nav id="site-navigation" role="navigation">
            <h3><?php _e( 'Menu', 'mh' ); ?></h3>
            <a href="#content" title="<?php esc_attr_e( 'Skip to content', 'mh' ); ?>"><?php _e( 'Skip to content', 'mh' ); ?></a>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' , 'menu' => 'main nav') ); ?>
        </nav><!-- #site-navigation -->                
               

You can replace 'main nav' value for the 'menu'  parameter, in bold above, with the name of your menu if it has a custom name or is one created in addition to your default navigation menu.

Comments