Support » Fixing WordPress » How to integrate wp_nav_menu and the walker class in bootstrap 3 custom menu

  • Hi,

    I am trying to integrate the wp_nav_menu() and the walker class in the dropdown custom bootstrap 3 menu and I am not sure if I understand the breakdown of how wp_nav_menu works. Here is the original HTMl code of the menu I am trying to integrate into wordpress:

    <div class="navbar navbar navbar-static-top" role="navigation">
            <div class="container containerContent">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <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="#"><img src="images/Arcadia-Logo.png"></a>
                </div>
    
                <div class="navbar-collapse collapse" style="margin-top:16px;">
    
                    <ul class="nav navbar-nav navbar-right">
    
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Arcadia <i class="fa fa-angle-down nav-arrow"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                            </ul>
                        </li>
    
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Technology <i class="fa fa-angle-down nav-arrow"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                            </ul>
                        </li>
    
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <i class="fa fa-angle-down nav-arrow"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                            </ul>
                        </li>
    
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Resources <i class="fa fa-angle-down nav-arrow"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                            </ul>
                        </li>
                        <li><button class="btn btn-primary btn-small hidden-xs" data-toggle="collapse" data-target="#demo"><i class="fa fa-search"></i></button></li>
                    </ul>
    
                    <form class="collapse navbar-form navbar-right visible-xs">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
    
                </div><!-- /.navbar-collapse -->
    
                <div class="row">
                    <form id="demo" class="collapse navbar-form navbar-right">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </div>
    
            </div><!-- /.container-fluid -->
        </div> <!-- end nav section -->

    When I add in my header.php in wordpress I understand that I need to start my code somewhat like this:

    <div class="navbar navbar navbar-static-top" role="navigation">
    		<div class="container containerContent">
    			<div class="navbar-header">
    				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    					<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="#"><img src="images/Arcadia-Logo.png"></a>
    			</div> <!-- end navbar-header -->
    
                <div class="navbar-collapse collapse" style="margin-top:16px;">
                    <?php wp_nav_menu(array(
                                'menu'           => 'primary',
                                'theme_location' => 'primary',
                                'menu_class'        => 'nav navbar-nav navbar-right',
                                'items_wrap'     => '<ul id="%1$s" class="%2$s nav navbar-nav navbar-right">%3$s</ul>',
                                'link_after'     => ' <i class="fa fa-angle-down nav-arrow"></i>'
    
                                'walker'         => new wp_bootstrap_navwalker())
    
                        ); ?>
                         <form class="collapse navbar-form navbar-right visible-xs">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
    
        </div> <!-- end navbar-collapse collapse -->
         <div class="row">
                    <form id="demo" class="collapse navbar-form navbar-right">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </div>
    
        </div> <!-- end container containerContent -->
    </div> <!-- end navbar navbar navbar-static-top -->

    What I am guessing and is asking if anyone can clarify, is

    ‘menu_class’ => does that mean the class for the “ul” tag

    also how do I breakdown the list items code:

    <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Arcadia <i class="fa fa-angle-down nav-arrow"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                            </ul>
                        </li>

    in the wp_nav_menu model as well as the special “li” tag below as the last list item?

    <li><button class="btn btn-primary btn-small hidden-xs" data-toggle="collapse" data-target="#demo"><i class="fa fa-search"></i></button></li>

    If anyone can direct to the right place or can help me understand how I integrate this into wordpress, that would be great. Thanks.

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘How to integrate wp_nav_menu and the walker class in bootstrap 3 custom menu’ is closed to new replies.