Convert WP Menu to a Drop Down for Mobile browser

Question

I'm working on a wp project with responsive theme.

I have single level nav menu at the top of the site, that I want to change to a Select Option tag for mobile browsers (small screens) with options for the nav items which is much easier to select in mobile site. So the UL LI menu will be replaced with a Selection- Option tag for mobile.

However, I'm unable to figure out how to change wp menu to a select option dropdown.

Answer 1

Here's what I've put together from different articles/themes:

files to modify:

functions.php

header.php

style.css

js (create folder "js" in theme root directory)

The Javascript:

jQuery(function() {
      jQuery("<select />").appendTo("nav");
      jQuery("<option />", {
         "selected": "selected",
         "value"   : "",
         "text"    : "Go to..."
      }).appendTo("nav select");
      jQuery("nav a").each(function() {
       var el = jQuery(this);
       jQuery("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");
      });
      jQuery("nav select").change(function() {
        window.location = jQuery(this).find("option:selected").val();
      });    
     });

save as custom.js and place in the js folder of the theme directory.

The functions.php file:

Open your themes functions.php file and locate the code that enqueues any existing styles or scripts and add this to the init:

wp_enqueue_script( 'my_customnav_script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ) )

. add this line to the If your theme doesn't enqueue add this to your functions.php file:

function add_themescript(){
  if(!is_admin()){
    wp_enqueue_script( 'my_customnav_script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ) );
    }
  }
  add_action('init','add_themescript');

The header.php file:

Replace/add current wp-nav css id or class as follows:

<nav>...Your themes navigation code here</nav>

The CSS:

@media only screen and (min-width: 480px) {
/* == INTERMEDIATE: Menu == */
#navigation-wrapper, nav ul a, nav ul {
width:75%;
font-size:82%;
}
nav ul {
width:90%;
}
nav a, .next-post a{
float:left;
margin:0 1%;
padding:5px 1%;
margin-bottom:0;
}
nav li:first-child a{
margin-left:0;
}
nav li:last-child  a{
margin-right:0;
}
/* == INTERMEDIATE: IE Fixes == */
nav ul li{
display:inline;
}
}
nav{
width:100%;
float:left;
background:#e44d26;
margin-bottom:9px;
padding:5px 0px 5px 0px;
}
nav select {
display: none;
}
@media (max-width: 960px) {
nav ul     {
display: none;
}
nav select {
display: inline-block;
}
}

Adjust the css style to your liking.

Answer 2

If your menu includes children the following code works well (in place of the above javascript)

jQuery(document).ready(function(){
   jQuery('ul:first').attr("id", "MENUID");
   jQuery("ul#MENUID > li:has(ul)").addClass("hasChildren");
   jQuery("ul#MENUID > li:has(ul) > ul > li > a").addClass("isChild"); 
});

jQuery(function() {
    jQuery("<select />").appendTo("nav");
    jQuery("<option />", {
       "selected": "selected",
       "value"   : "",
       "text"    : "Go to...",
    }).appendTo("nav select");

    jQuery("nav a").each(function() {
       var el = jQuery(this);
       jQuery("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text(),
           "class"   : el.attr("class")
       }).appendTo("nav select");
    });

    jQuery("nav select").change(function() {
      window.location = jQuery(this).find("option:selected").val();
    });    
 });

 jQuery(document).ready(function() {
   jQuery("nav select option").each(function() {
     var el = jQuery(this);
     if(el.hasClass("isChild")){
       jQuery(el.prepend("- "))
     }
 });
});

Answer 3

simply use this plugin. Its better than just a dropdown menu

https://wordpress.org/plugins/wp-responsive-menu/