submenus

[toriqo]

when the navbar is displayed on smaller screen resolutions, the submenus should be displayed differently than they are when the navbar is fully expanded. check out twitter bootstrap's collapsed navbar for a better understanding of the submenus.

[ghost]

does it cut of the dropdown menu for you as well? in firefox 11 it does for me. its happening because of some renamed classes i think. maybe just to remove a overflow: hidden somewhere on the taskbar would solve this, but its meant to be there, or z-index.

but i dont like it to have the normal dropdown menus in mobile view at all. the sad thing is that in original bootstrap all submenus get expanded and i dont like that as well, i would liek to just collapse all submenus, like hey do here, but on touch/touch just expand, no dropdown overlay!

i filed a issue at the bootstrap ropo, you might wan't to participate https://github.com/twitter/bootstrap/issues/3184 or maybe there will be a manual solution posted by someone soon i hope.

[philcaine]

Issue

Dropdowns in the collapsable Navbar should become stacked pills when the display size is reduced.

Problem

The current jQuery solution providing "dropdown" markup to elements with the .submenu class (in footer.php) does not render html code. Because the proper html is not generated, when the display size is reduced the dropdown "pop-out" gets cut off and becomes unusable.

Solution

The solution for this is to create a new Custom Walker for use with wp_nav_menu. This allows rendering of the proper html.

I figured out that a Custom Walker would work, but I am certainly not a PHP programmer. A google search led me to "Walker class for WordPress custom menu integration in Twitter Bootstrap navbar" at https://gist.github.com/2345029.

From this gist, I added the following Walker_Navbar_Menu class extension to functions.php

class Walker_Navbar_Menu extends Walker_Nav_Menu {

    public $dropdown_enqueued;

    function __construct() {

        $this->dropdown_enqueued = wp_script_is( 'bootstrap-dropdown', 'queue' );
    }

    function display_element( $element, &$children_elements, $max_depth, $depth = 0, $args, &$output ) {

        if ( $element->current )
            $element->classes[] = 'active';

        $element->is_dropdown = ( 0 == $depth ) && ! empty( $children_elements[$element->ID] );

        if ( $element->is_dropdown )
            $element->classes[] = 'dropdown';

        parent::display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output );
    }

    function start_lvl( &$output, $depth ) {

        if ( ! $this->dropdown_enqueued ) {

            wp_enqueue_script( 'bootstrap-dropdown' );
            $this->dropdown_enqueued = true;
        }

        $indent = str_repeat( "\t", $depth );
        $class = ( 0 == $depth ) ? 'dropdown-menu' : 'unstyled';
        $output .= "\n{$indent}<ul class='{$class}'>\n";
    }

    function start_el( &$output, $item, $depth, $args ) {

        $item_html = '';
        parent::start_el( &$item_html, $item, $depth, $args );

        if ( $item->is_dropdown && ( 1 != $args->depth ) ) {

            $item_html = str_replace( '<a', '<a class="dropdown-toggle" data-toggle="dropdown"',    $item_html );

            $item_html = str_replace( '</a>', '<b class="caret"></b></a>', $item_html );
            $item_html = str_replace( esc_attr( $item->url ), '#', $item_html );
        }

        $output .= $item_html;
    }
} 

I disabled the "dropdown" jQuery script in footer.php and I added the following to the end of the wp_nav_menu array in header.php

'walker' => new Walker_Navbar_Menu()

Finally in the Dashboard I added a new Custom Link with URL of #. This created a successfully functioning dropdown. Yeah!

Newbie on Github

I am new to github so I'm not fully versed in how all of this works. I hope this helps.

Rachel, THANK YOU for the Theme.

[rachelbaker]

Phil,

Thanks for posting such a smart solution along with the Custom Walker code! I will add it to the next build of the theme and add your name to the credits.