Select box menu doesn’t load pages

4 Views

I’m my WordPress (with Buddypress) application I use a responsive theme. However, I have changed the menu to a select box dropdown menu if the screen width is <= 768px.

You can see my idea of doing this below, which is done by using two wp_nav_menu’s, one which (with the help of a walker) creates the menu as a select dropdown menu (of course with the help of responsive.css).

Read More

However, I a problem here I need help with:

The select box menulooks correct but if I change option in the menu nothing actually happens (i.e. the page doesn’t change). How come?

header.php: 

<div id="navigation" role="navigation">
    <?php

    <?php
        wp_nav_menu( array(
            'container' => false,
            'menu_id' => 'nav',
            'theme_location' => 'primary',
            'fallback_cb' => 'bp_dtheme_main_nav' )
        );

        wp_nav_menu(array(
            'container' => false,
            'menu_id' => 'nav',
            'theme_location' => 'primary', // your theme location here
            'walker'         => new Walker_Nav_Menu_Dropdown(),
            'items_wrap'     => '<select>%3$s</select>',
            'fallback_cb'    => 'bp_dtheme_main_nav'
        ));


        class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu{
            function start_lvl(&$output, $depth){
               $indent = str_repeat("t", $depth);
            }

            function end_lvl(&$output, $depth){
              $indent = str_repeat("t", $depth);
            }

            function start_el(&$output, $item, $depth, $args){
              $item->title = str_repeat("&nbsp;", $depth * 4).$item->title;

              parent::start_el(&$output, $item, $depth, $args);

              $output = str_replace('<li', '<option', $output);
            }

            function end_el(&$output, $item, $depth){
              $output .= "</option>n";
            }
        } ?>
</div>

EDIT: I’ve realized that the select options that’s rendered doesn’t contain any values, so I can’t grab the options value for redirection. Something is obviously wrong with the code, but what?

Post Views: 4

Related posts

Leave a Reply

1 comment

  1. If I am reading your question correctly then the missing part is the Javascript which changes the window.location when one of the options in the select menu is selected.

    Add the following to your onload JS;

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

    EDIT

    OK, I’ve actually just implemented this into the theme I’m doing myself. I see you’ve used One Trick Pony’s answer in this question –

    https://wordpress.stackexchange.com/questions/27497/how-to-use-wp-nav-menu-to-create-a-select-menu-dropdown

    I’m not sure how they’ve got that to work as there is no url value to use as navigation (just as you’ve pointed out), so I modified the start_el method as follows;

    function start_el(&$output, $item, $depth, $args){
  // add spacing to the title based on the depth
  $item->title = str_repeat("&nbsp;", $depth * 4).$item->title;

  parent::start_el(&$output, $item, $depth, $args);

  $href = ! empty( $item->url ) ? ' value="'   . esc_attr( $item->url ) .'"' : '';

  // no point redefining this method too, we just replace the li tag...
  $output = str_replace('<li', '<option '.$href, $output);

}

    I kept the Javascript the same as the above and I wrapped my wp_nav_menus call in my header.php in a form with the id responsive-nav;

      <!-- RESPONSIVE NAVIGATION FLIP -->
    <form id="responsive-nav" action="" method="post">
    <select>
    <option value="">Navigation</option>
        <?php 

        $menu = wp_nav_menu(array(
          'theme_location' => 'primary', 
          'walker'         => new Walker_Nav_Menu_Dropdown()
        ));

        ?>
    </select>
    </form>
    <!-- /END RESPONSIVE NAV -->