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.

Hi I'm customizing a Genesis framework theme Jane and I want to change the menu to be responsive with Twitter Bootstrap. I already found an question how to override the genesis_do_subnav function Using a filter to modify Genesis wp_nav_menu. I want to override that methode and generate the HTML shown below. The genesis sourcecode: genesis_do_subnav() which generates the HTML that is currently used.

Customized Output:

<nav class="nav-secondary navbar navbar-default" role="navigation" itemscope="itemscope"
 itemtype="http://schema.org/SiteNavigationElement">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>
<div class="wrap collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul id="menu-main-menu" class="menu genesis-nav-menu menu-secondary nav navbar-nav">
        <li id="menu-item-4519"
            class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4519">
            <a href="link">Home</a>
        </li>
        <li id="menu-item-4522"
            class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-4522 dropdown">
            <a href="link">Home</a>
            <ul class="sub-menu dropdown-menu">
                <li id="menu-item-4523"
                    class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4523">
                    <a href="link">Home</a></li>
                <li id="menu-item-4524"
                    class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4524">
                    <a href="link">Home</a></li>
            </ul>
        </li>
    </ul>
</div>
</nav>

The current HTML that is generated by genesis_do_subnav() output:

<nav class="nav-secondary" role="navigation" itemscope="itemscope"
 itemtype="http://schema.org/SiteNavigationElement">
<div class="wrap">
    <ul id="menu-main-menu" class="menu genesis-nav-menu menu-secondary">
        <li id="menu-item-7"
            class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-7">
            <a href="link">Home</a></li>
        <li id="menu-item-9931"
            class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-9931">
            <a href="link">Home</a>
            <ul class="sub-menu">
                <li id="menu-item-9777"
                    class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9777">
                    <a href="link">Home</a></li>
            </ul>
        </li>
    </ul>
</div>
</nav>

Can anyone tell me how to add the extra div for the toggle button to expand/collapse the menu and how I can change

<div class="wrap">

to

<div class="wrap collapse navbar-collapse" id="bs-example-navbar-collapse-1">
share|improve this question

closed as off-topic by Pieter Goosen, G. M., birgire, ialocin, Rarst Jun 25 at 11:55

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

add comment

1 Answer 1

I answered earlier but the link I provided doesn't exist anymore. So, I'll post the code here in hopes that it is what you're looking for.

In your functions.php, add this snippet to create the markup:

/* Mobile Menu
----------------------------------------------------------------------------------------*/
add_action( 'genesis_site_description', 'ls_mobile_menu_toggle', 5 );
function ls_mobile_menu_toggle() {
    echo '<div class="menu-toggle">';
        echo '<li></li><li></li><li></li>';
    echo '</div>';
}

In your JS file, put this snippet in for the open/close functionality:

// Show/hide the main navigation
$('.menu-toggle').click(function() {
    $(this).toggleClass('open');
    $('.header-widget-area').toggleClass('expanded');
});

And finally, your styles: For Desktop:

.menu-toggle {
    display: none;
    visibility: hidden;
}

For a media query of your choice:

    .menu-toggle {
        background: #000;
        color: #FFF;
        cursor: pointer;
        display: block;
        float: none;
        height: 40px;
        margin: 3rem auto 1rem;
        overflow: hidden;
        padding: 4px 10px;
        text-align: center;
        visibility: visible;
        width: 46px;
}

    .menu-toggle li {
        background: #FFF;
        display: block;
        height: 4px;
        margin: 5px auto;
    }

    .menu-toggle a:hover,
    .menu-toggle a:active {
        text-decoration: none;
    }

    .header-widget-area {
        max-height: 0;
        overflow: hidden;
        -webkit-transition: max-height 0.8s;
        -moz-transition: max-height 0.8s;
        transition: max-height 0.8s;
    }

    .header-widget-area.expanded {
        max-height: 100px;
    }

You might have to change the selectors within the media query, but shouldn't have to. Style as you wish.

You might also have to give your header area:

position: relative;
share|improve this answer
add comment

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