Convert Menu To Dropdown In Small Screens

An outstanding guide on how to change or convert menu to dropdown menu in small screens. Creating a theme is an easy task. Then adding style to them becomes almost easy, by using software like Dreamweaver. But creating a responsive design is really tough task. Since you are creating almost two different style-sheets ( though in one CSS file ) for the same layout.

So I wish you already have responsive wordpress theme. If not then you can try Genesis. Its an outstanding theme framework for wordpress. Or you can simply take a visit to my most popular themes gallery :

• Best WordPress SEO Themes
• Amazing Creative Themes
• Powerful Magazine Themes For WordPress

Back to our mission. We are going to create a dropdown navigation block. We will be using custom functions and CSS throughout our work and this task is not a all complicated. First i will explain how to change your Navigation to dropdown in Genesis Theme. And then secondly I will tell how to do it for other websites or theme.

Genesis : Converting Menu To Dropdown In Small Screens

This guide ( in this section ) is dedicated only to Genesis framework based blogs or websites. So if you are using any of its theme or child theme, then you can surely use this methods for your blog.

Our Requirements : I Mean You Have To Edit & Precautions

• Function.php file
• Stylesheet.css
• Please create the backup of both these files
• Make sure your online file manager or FTP program is open, since any wrong code implementation to function file will kill your site temporally.

Please copy the exact PHP code provided below in your function.php file.

// Place the action in your theme setup function
add_action('genesis_after_header','secundo_mobile_menu_primary');

// generates a dropdown select element for navigation on mobile devices
function secundo_mobile_menu_primary(){

        wp_nav_menu(
            array(
                'menu' => 'Primary Navigation', // your theme location here
                'walker' => new Walker_Nav_Menu_Mobile(),
                'items_wrap' => '<div><form><select id="prim-selector" name="URL" onchange="window.location.href= this.form.URL.options[this.form.URL.selectedIndex].value">%3$s</select></form></div>',
                'container_id' => 'mobile_menu_primary'
            )
        );
}

// Extend the Walker class

class Walker_Nav_Menu_Mobile extends Walker_Nav_Menu{
var $to_depth = -1;

    function start_lvl(&$output, $depth){
      $output .= '</option>';
    }
    function end_lvl(&$output, $depth){
      $indent = str_repeat("\t", $depth); // don't output children closing tag
    }
    function start_el(&$output, $item, $depth, $args){
$indent = ( $depth ) ? str_repeat( " ", $depth * 4 ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
$value = ' value="'. $item->url .'"';
$output .= '<option'.$id.$value.$class_names.'>';
$item_output = $args->before;
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$output .= $indent.$item_output;
    }
    function end_el(&$output, $item, $depth){
if(substr($output, -9) != '</option>')
       $output .= "</option>"; // replace closing </li> with the option tag
    }
}

Thanks to wpconsult for this beautiful and powerful function. This will add the dropdown navigation in your theme, just below the header. So if your navigation is above header, then just replace the :

add_action('genesis_after_header','secundo_mobile_menu_primary');

to

add_action('genesis_before_header','secundo_mobile_menu_primary');

I think I am very clear in this area. Now its time to edit our stylesheet. But in-order to proceed you have to use firebug to inspect the area. Just see the image below :

Now every designer usually design theme considering two different screen size. I have considered ( max-width: 600px ) and ( max-width: 1120px ). So see what you have in your template, and you can edit them as per your need.

So our dropdown navigation bar should not render till the browser resolution moves below 1120px. In order to do so we will add display none to mobile_menu_primary. So the code will be : Place it in your stylesheet.

#mobile_menu_primary{
display: none;
}

Add this code just above the block from where the Responsive style starts. Just check the image below :

From the first image ( Firebug Inspection ), we found that ” select ” is rendering the dropdown. So we will edit is as per our need. According to my header color, logo placement and design, I have modified it like this :

select {
border:0;
padding: 5px 0;
font-size: 14px;
color: #fff;
height: 40px;
display: block;
width: 100%;
margin:0 auto;
text-align : center;
background: url("images/br.png") repeat-x scroll center bottom #33363B;
}

I think you remember that we have just disabled our mobile_menu_primary. So now we have to change its visibility. So we will also add the below code in our responsive styles :

#mobile_menu_primary{
display: block;
}

For Others : Convert Menu To Dropdown In Mobile Screens

In this area we will talk for other themes or websites. But before I proceed I would like to thank css-tricks for helping me understand this whole concept. This process is little bit confusing, and you really need to have a basic knowledge in CSS and JavaScript to understand them all.

I think its really not necessary to write exactly the same thing again and again. I mean this concept has been explained in very clear manner at : Convert menus To Dropdown. So simply go ahead and check the tutorial.

I wish you would have liked my guide, please leave suggestions or questions in comment area.

Related posts:

Customize & Reposition Genesis Breadcrumb Customize Post Info In Genesis Theme Add Related Post To Genesis Themes Without Plugin Remove Genesis Footer How To Convert Videos In Different Formats