How to Integrate Bootstrap v4 NavBar into WordPress theme? December 30, 2017 | Md. Shahidul Islam

I am using Bootstrap 4 and my menu structure like this:

<ul class="navbar-nav mx-auto justify-content-center">
    <li class="nav-item">
        <a class="nav-link" href="index.php">HOME</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="faq.php">FAQ</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="rules-and-regulations.php">RULES AND REGULATIONS</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">REGISTRATION</a>
    </li>
</ul>
Let’s start adding menu dynamically on wordpress custom theme. I am calling WP Nav in header.php file like this: 
<?php
wp_nav_menu( array(
   'theme_location' => 'primary',
   'depth' => 2,
   'container' => 'ul',
   'menu_class' => 'navbar-nav mx-auto justify-content-center',
   'direct_parent' => true, 
   'sub_menu' => true,
   'show_parent' => true
));
?>
Now, add this function in function.php file. 
function my_walker_nav_menu_start_el($item_output, $item, $depth, $args) {
//    $classes     = implode(' ', $item->classes);
    $classes     = 'nav-link';
    $item_output = preg_replace('/<a /', '<a class="'.$classes.'"', $item_output, 1);
    return $item_output;
 }
add_filter('walker_nav_menu_start_el', 'my_walker_nav_menu_start_el', 10, 4);

Recent post

Archives