How to add special content to “WordPress Dropdown Menu with Bootstrap”?

3 Views

I am using WordPress Dropdown Menu With Bootstrap ( http://astronautweb.co/2012/10/wordpress-dropdown-bootstrap/ ). I have added this to my WordPress theme.

I have to add the social sharing icons div to the code before the div in the wp_nav_menu closes. Otherwise, navbar-right div goes down. How can I add this to wp_nav_menu? I mean what shall I do if I want to add something else or something more? For example, if I want to add “Hello” before the div that wp_nav_menu created closes, how am I going to do this?

<?php
            wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>

        <div class="navbar-right">
                <button type="button" class="btn btn-twitter navbar-btn"><i class="icon-twitter"></i></button>
                <button type="button" class="btn btn-facebook navbar-btn"><i class="icon-facebook"></i></button>
                <button               type="button" class="btn btn-foursquare navbar-btn"><i class="icon-foursquare"></i></button>
        </div>
Post Views: 3

Related posts

Leave a Reply

1 comment

  1. I see the tutorial you listed is using my walker class which should make this pretty easy. The best thing to do is set the wp_nav_menu() container to false and manually wrap the menu. I would probably add the social section as a separate wp_nav_menu() so it’s not hardcoded into the theme.

    <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <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>
            <a class="navbar-brand" href="<?php bloginfo('url'); ?>">
                <?php bloginfo('name'); ?>
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <?php
                wp_nav_menu( array(
                    'menu'       => 'primary_menu',
                    'theme_location' => 'primary_menu',
                    'depth'      => 2,
                    'container'  => false,
                    'menu_class' => 'nav navbar-nav',
                    'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
                    'walker' => new wp_bootstrap_navwalker())
                );

                wp_nav_menu( array(
                    'menu'       => 'social_menu',
                    'theme_location' => 'social_menu',
                    'depth'      => 2,
                    'container'  => false,
                    'menu_class' => 'nav navbar-nav navbar-right',
                    'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
                    'walker' => new wp_bootstrap_navwalker())
                );
            ?>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>