WP Select Box Navi

Ìgbéwọlẹ̀

1. Make sure your Theme using wp_head();! If not, add the function <?php wp_head(); ?> to the “header.php” file in your theme directory right before the closing </head> tag.
2. Install the Plugin from the dashboard or download it from wordpress.org and load the folder “wp_select_box_navi” in to the “http://www.my-blog.com/wp-content/plugins/” directory
3. Activate the Plugin from plugin menu in the WordPress dashboard

4. Add the following CSS styles to your Theme stylesheet:

   Show or hide the default navigation

   .nav { display: none } /* hide default navi */
   

   -> or

   .nav { display: block } /* show default navi */
   

   Show or hide the select box navigation

   .tinynav { display: none } /* hide select box navi */
   

   -> or

   .tinynav { display: block } /* show select box navi */
   

   With adding CSS Media Queries to your styles you can switch both navigations by display size

   @media screen and (min-width: 1024px) /* show default if screen is larger than 1024px with */
   {
   .nav { display: block }
   .tinynav { display: none }
   }

   @media screen and (max-width: 1023px) /* show select box if screen is smaller than 1024px with */
   {
   .nav { display: none }
   .tinynav { display: block }
   }