Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
add comment

3 Answers

up vote 1 down vote accepted

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.

share|improve this answer
    
Seems very comprehensive.. I'll be doing this tomorrow and update you. Thank you –  Krunal Dec 2 '12 at 11:47
add comment

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("- "))
     }
 });
});
share|improve this answer
add comment

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

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.