How To Create Responsive Menu in WordPress

[easy-social-share counters=0 style="button"]

That is an advanced stage article for WordPress developers. On this article I will be able to show you how to insert a responsive navigation menu to any kind of WordPress themes making use of CSS, media queries or Jquery. Later on in the article, We will display a few various WordPress plugins you can also use to get same final results for all of you that will do nothing like to code. Even though, I always caution that plugins can often significantly slow down any kind of WordPress unit installation when a lot of and the incorrect one is used. This is why I usually start off almost all of my lessons by providing an alternate answer to using a plugin to generate an answer.

Coding Answer for a Top Nav Responsive Menu in WordPress

For the reason that agreed, here I will discuss the simple steps important to code a totally responsive top navigation menu into your current Word Press themes:

  1. Now that you know which your existing themes is. Avoid to next stage, other-wise go to your Word Press admin dashboard and then click appearance/themes and then see which themes is your active themes. Mine is 2011 to make certain that are exactly what I will be able to a reference in this particular article, but yet the similar guidelines sign up for any kind of Word Press theme.
  2. Open up the header.php file folder for your theme in a text editor and from the Word Press admin editor by going to appearance/editor and then click the header.php file name in the exact column of the web page.
  3. In header.php try to find a Meta tag for devices. In 20 11 it seems like this:

<meta name="viewport" content="width=device-width" />

And also adjust it to seem like this:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

4.Right now open up your single.php file folder and then try to find the nav tag that should be at line number seventeen or more. Remove every thing in between of the opening up nav tag or ending nav tag including the tags by themselves and also exchange to them with:

<nav><?php wp_nav_menu( array( 'theme_location' =>  'primary' ) ); ?></nav>

5.Open up your theme’s style css file folder and then assign the following CSS styles to the finish of it:
nav pick

{

  display: none; /*= Force dropdown navigation to hide on desktop = */

}

@media (max-width: 960px)

{

  nav ul     { display: none; } /*= Force normal horizontal navigation to hide mobile devices and ipad = */

  nav select { display: inline-block; } /*= Force drop down navigation to get displayed on mobile devices and ipad = */

}

That’s almost all there is certainly to customizing your WordPress top navigating menu to work fantastic on ipod device, I phone or other mobile phones. Just do it and find out it right now on a mobile phone system and then check that it actually works.

Inserting Responsive Navs with WordPress Plugins

You also have a plugin it is possible that you like to consider for responsive navigation menus. One of the most easy and also straight-forward responsive navigation menu plugin available throughout the WordPress codex is actually known as Responsive Choose Menu that can be downloadable from http://wordpress.org/extend/plugins/responsive-select-menu/.

This will provide you a great drop down navigation menu for mobile phones that is similar to the one in this article picture:

nav-wp
The Responsive Choose Menu plugin has a simple to use admin that permits you to very easily adjust settings just like width, depth, spacers, excluding items, item names and then visibility of items as demonstrated the following screenshot:

screen-wp
One more excellent responsive navigation menu plugin available for just $16 is the Ubermenu plugin seen in the following screenshot:

ubermenu-
It will be a lot more easy to customize rather than the Responsive Choose Menu plugin alluded to earlier, but it surely is as well a lot more complex and then offers several much more features or a much more dynamic and also attractive design and style.

Hope you all like this Tuts by CodiTuts.com, if yes then keep us supporting by sharing this post, Cheerful Coding smiley.

Submit a comment

Pin It on Pinterest