CODEWITHSUNDEEP
htmlcsswordpresstwitter-bootstrap
sayayin
sayayin

Reputation: 1041

Problems incorporating Bootstrap 4 navbar with wordpress 4.x

Working on a incorporating bootstrap navbar with wordpress and it is not working for me. Below is the wordpress wp_nav_menu function and my commented out code for the navbar (which works). Weird thing I notices is that the wordpress puts the classes at the wrong places.

<?php
   wp_nav_menu( array(
      'theme_location'   => 'primary',
      'menu'             => 'primary',
      'container'        => 'div',
      'container_class'  => 'navbar-collapse collapse justify-content-end',
      'menu_class'       => 'nav navbar-nav'
                    ) );
?>
<!-- <div class="navbar-collapse collapse justify-content-end">
        <ul class="nav navbar-nav">
           <li class="nav-item"><a href="/" class="nav-link">Test 1</a></li>
           <li class="nav-item"><a href="/" class="nav-link">Test 2</a</li>           
        </ul>
     </div> 
-->

Wordpress builds html as follows which ofcourse breaks as classes are not applied at the right nodes. ul has no classes where as the container has the wrong classes. 

<div class="nav navbar-nav">
   <ul>
      <li class="page_item page-item-12"><a 
      href="http://localhost/fmr/Test1">Test 1</a></li>
      <li class="page_item page-item-8 current_page_item"><a 
      href="http://localhost/fmr/">Test 2</a></li>
   </ul>
</div>

Any advice?

Thank you!

Upvotes: 1

Views: 467

Answers (1)

Derek Nolan
Derek Nolan

Reputation: 744

In the settings array, the menu is set to primary. This should be set to the title of the menu in the back end. In this case, menu should be Main Menu.

<?php
   wp_nav_menu( array(
      'theme_location'   => 'primary',
      'menu'             => 'Main Menu',
      'container'        => 'div',
      'container_class'  => 'navbar-collapse collapse justify-content-end',
      'menu_class'       => 'nav navbar-nav'
   ) );
?>

Upvotes: 2

Related Questions