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
add comment

Your Answer

 
discard

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

Browse other questions tagged or ask your own question.