Integrating a custom bootstrap navigation menu into WordPress (wp_nav_menu)

I am having a hell of a time with this one issue. Everything but this has worked great for me, so hoping I can get some feedback. I designed a static website using twitter bootstrap and made quite a few alterations to the structure. I have a navbar-left and navbar-right ul because on larger sizes (sm-lg) the logo appears in the center of my navigation bar, with 3 links on the left and 3 links on the right.

All works great, except when I try and apply my styles to the generated wp_nav_menu. I don’t really understand this part of it so hoping for a simple explanation out there. I have tried adding the custom css to the menu (added it to each menu item basically in WordPress) with no success. I also understand that nav walker will need to be installed which is no problem. Below is the HTML for it:

          <!-- Collect the nav links, forms, and other content for toggling -->

            <div id="navbar-collapse-main" class="collapse navbar-collapse">
                <ul id="left-side-nav" class="nav navbar-nav navbar-left">
                    <li><a class="nav-links" href="page-home.php">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle nav-links" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-links" href="#">Drink Menu</a></li>
                            <li><a class="dropdown-links" href="#">Food Menu</a></li>
                            <li><a class="dropdown-links" href="#">Specials</a></li>
                    <li><a class="nav-links" href="#">Order</a></li>
                <!-- /#left-side-nav -->

                <ul id="right-side-nav" class="nav navbar-nav navbar-right">
                    <li><a class="nav-links" href="#">Catering</a></li>
                    <li><a class="nav-links" href="#">Our Story</a></li>
                    <li><a class="nav-links" href="#">Contact</a></li>
                <!-- /#right-side-nav -->
            <!-- /.navbar-collapse --> 
        <!-- /.container -->
    <!-- /#main-nav -->

and here is the wp_nav_menu

            wp_nav_menu( array(
                'theme_location'        => 'primary',
                'container'             => 'nav', 
                'container_id'          => 'navbar-collapse-main',
                'container_class'       => 'collapse navbar-collapse',
                'menu_id'               -> 'right-side-nav left-side-nav',
                'menu_class'            => 'navbar-right navbar-left'
                ) );

Read more here: Integrating a custom bootstrap navigation menu into WordPress (wp_nav_menu)

Leave a Reply

Your email address will not be published. Required fields are marked *