Create Responsive Menu With the Help of TinyNav,js - Wordpress

Now-a-days Responsive web designs and developments are so familiar, because of  different screens with different screen size and resolutions. There are plenty of web designs available to use responsive web designs. Here i will give very small code to create responsive menu for your WordPress Website.

First of all download TinyNav.js from its Original Site or from github.

And make our theme folder and add your downloaded script into it. Then enqueue Your script into WordPress by the following code. Add it on your Theme "functions.php"

wp_enqueue_script('tinynav' , get_template_directory_uri() . '/js/tinynav.min.js' , array('jquery'));

and create your menu through your wordpress admin menu settings or else through code. and you have to make the menu inside a id name #topnav . Here is a sample code your source view of web page.

<ul id="topnav">
  <li class="selected"><a href="/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>




and your add a small code to sleep tinynav while your site is on big screens. It must be used for small screens  screen resolution is less than 600 px. and add this to your theme  "style.css"

/* styles for desktop */
.tinynav { display: none }

/* styles for mobile */
@media screen and (max-width: 600px) {
    .tinynav { display: block }
    #nav { display: none }
}

And hook your tiny with the help of jquery code. here it will help you to create responsive theme

<script>
  $(function () {
    $("#nav").tinyNav();
  });
</script>

Thats it you have done all necessary works to add tinynav.js. And Now check your website by using different screen size. Use screenfly or some other tools to may the changes giving effect or not.

08:59 by Unknown · 3