• Skip to main content
  • Skip to primary sidebar
  • Home
  • Technology
  • Inspiration
  • Photography
  • Business
  • Games
  • More
    • SEO
    • Tutorial
      • Coding
      • WordPress
    • Resume/CV
    • Graphics
      • Logo
    • Wallpapers
    • Freebies

Free Web Resources

For Smart Internet Users, Designers and Developers

How to Create an Awesome WordPress Responsive Menu for Your Theme

by Rupesh Kumar

Building responsive menus is the hottest trend today. And this hardly comes as a surprise since we witness more and more Internet users leaning towards websites that give them a great browsing experience, irrespective of attractive they look. The navigational structure indeed plays a huge role in determining how good the user experience is.

The WordPress developers and designers invest great efforts to ensure that the websites they are building have menus that adaptable to varying set of operating systems and screen sizes. It is immensely important that your website’s menu adapts itself seamlessly in accordance with diversified devices – be it desktops systems, or comparatively smaller tablets, or the smallest screen-sized Smartphones. Talking of phones, for instance, the long menus are not suited for their screen.

Now, if you are struggling to make your website’s menu work responsively across different OS platforms and devices, you can read this easy-to-follow tutorial and learn the requisite steps for creating wordpress responsive menu.

To Begin With, Create a Child Theme

Image 1 - wordpress responsive menuThere are still webmasters who haven’t adopted the practice of performing customizations on the child themes. The biggest incentive to making the required changes in the child theme is that your original theme remains untouched. Thus, if you end up making errors during customization, they will not hamper your original theme. Also, you can update the original theme anytime you want because the upgrades will not be lost.

Now, Let’s Have a New Menu Location

Image 2.9 - wordpress responsive menuThe next step involves having a new menu location for our mobile menu. What this does is that it makes our exercise much more scalable because when you are making edits to the menu location instead of a menu, you get the freedom to add new menus to the location. Thus, no need arises to make any changes to stylesheet.

Now, for adding a new menu location to your theme, all you got to do is to add the following code to your functions.php file:

1
2
3
4
function extra_setup() {
register_nav_menu ('primary mobile', __( 'Navigation Mobile', 'mytheme' ));
}
add_action( 'after_setup_theme', 'extra_setup' );

Once you add this code, the changes will be reflected in the backend. Just go to Appearance>Menus. In there, you will find two menu locations as your options. All you need to do now is create a new menu, and assign it to one of the two menu locations you have with you.

Adding the Menu Location We Just Created to the Header

In order to carry this addition out, we will open the header.php file, find our wherefrom the call to wp_nav_menu is being made and then add this code below that:

1
wp_nav_menu( array( 'theme_location' => 'primary mobile', 'menu_class' => 'nav-menu' ) );

This one line code goes on to generating HTML for the new menu location.

Finalizing the CSS Classes

Image 3 - wordpress responsive menuNow, to make sure that the correct menu is being displayed, @media queries will be used which will perfrom the toggling of menu displays.

As a default, the WordPress setup encloses menus within the div tag. Accompanying it is the class name that we fetch from the menu name, now, in order to make sure there is a flexibility to our approach, we create new generic class names for the menu container. The wp_nav_menu_args filter will do the job for us. Again, we need to make changes to the functions.php file:

1
2
3
4
function set_container_class ($args) {
$args['container_class'] = str_replace(' ','-',$args['theme_location']).'-nav'; return $args;
}
add_filter ('wp_nav_menu_args', 'set_container_class')

We aren’t performing a very complex operation here. We are just assigning the container_class to the theme location and following it by adding ‘-nav’.

Making Stylesheet Changes In Order to Dictate the Menu Display

Now it comes to adding the appropriate style, for which we will add the following code to the style.css file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.primary-mobile-nav {
display: none;
}

@media (max-width: 710px){

.primary-nav {
display: none;
}

.primary-mobile-nav {
display: block;
}

}

When the mobile menu has to be made invisible, its display attribute will be set to none. And for displaying the mobile menu instead of the primary menu, you got to position the display statements within the respective @media query.

Apparently, you have the freedom of adding n number of menus and and also the screen-sizes, for which all you got to do is to add more menus in the steps described above. Do let us know if you employ more techniques to create responsive menus for your WP theme.

Author Bio:
Rick Brown is a veteran mobile application developer for Mobiers Ltd – a leading iPhone app development company. You can get his best consultation or advices in case, you are willing to explore more information for the same.

What to read next?

  • How to Create Custom WordPress Widget to be Used on Your Set Up?
  • 10 Best Coming Soon WordPress Themes For 2016 Worth Exploring
  • Adding Multiple Post Thumbnails/Featured Images in WordPress
  • Top 10 WordPress Parallax Themes For 2016
  • Tips to Follow for Improving Security to Your WordPress Website
  • 6 Best WordPress Photography Themes For Online Presence

Filed Under: Coding, Tutorial, Wordpress Tagged With: Coding, Tutorials, wordpress, WordPress Themes

Reader Interactions

Leave a Reply Cancel reply

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

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Search

Trending

  • Best Barbie Font for your next project
    Best Barbie Font for your next project
  • 30 Examples Of Shadow Photography Taken at Perfect Time
    30 Examples Of Shadow Photography Taken at Perfect Time
  • 30 Funny Examples Of Fat Animals
    30 Funny Examples Of Fat Animals
  • 10 Best Nursing Resume Templates
    10 Best Nursing Resume Templates
  • 30 Fantastic And Creative Prints Ads
    30 Fantastic And Creative Prints Ads
  • 7 Best Video Chat Websites
    7 Best Video Chat Websites
  • 30 Creative Examples Of Electronics Print Ads
    30 Creative Examples Of Electronics Print Ads
  • 30 Impressive Healthcare Print Ads
    30 Impressive Healthcare Print Ads
  • 50 Mind-Blowing Fantasy Wallpapers For Free
    50 Mind-Blowing Fantasy Wallpapers For Free
  • A Guide To The Types Of Collision Avoidance Sensor
    A Guide To The Types Of Collision Avoidance Sensor

Pages

  • About
  • Privacy Policy
  • Contact
  • Facebook
  • RSS
  • Twitter

EMAIL NEWSLETTER

Get the latest in your Inbox for free.

Copyright © 2023 · Free Web Resources