navigation - Add Bootstrap dropdown class to a nav menu

admin管理员组

文章数量:1389772

How to build this menu in WordPress

<div class="collapse navbar-collapse" id="collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">our story</a></li>
                    <li><a href="#">our vision</a></li>
                    <li class="dropdown">
                        <a href="#">History</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">History 1</a></li>
                            <li><a href="#">History 2</a></li>
                            <li><a href="#">History 3</a></li>

                        </ul>
                    </li>

                </ul>
            </div>

WordPress Code:

<div class="collapse navbar-collapse" id="collapse-1">

<?php
wp_nav_menu( array(
    'theme_location' => 'header',
    'menu_class' => 'nav navbar-nav',
    'fallback_cb' => false
) );
?>

</div>

How to build this menu in WordPress

<div class="collapse navbar-collapse" id="collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">our story</a></li>
                    <li><a href="#">our vision</a></li>
                    <li class="dropdown">
                        <a href="#">History</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">History 1</a></li>
                            <li><a href="#">History 2</a></li>
                            <li><a href="#">History 3</a></li>

                        </ul>
                    </li>

                </ul>
            </div>

WordPress Code:

<div class="collapse navbar-collapse" id="collapse-1">

<?php
wp_nav_menu( array(
    'theme_location' => 'header',
    'menu_class' => 'nav navbar-nav',
    'fallback_cb' => false
) );
?>

</div>

• menus
• navigation
• twitter-bootstrap

Share Improve this question edited Jul 26, 2017 at 11:50 Max Yudin 6,38822 gold badges2626 silver badges3636 bronze badges asked Jul 26, 2017 at 11:13 sevougsevoug 2111 gold badge11 silver badge66 bronze badges 4

• What's your code to build a nav menu without dropdown class? – Max Yudin Commented Jul 26, 2017 at 11:15
• Go through this link, you will get the idea. codex.wordpress/WordPress_Menu_User_Guide – TMA Commented Jul 26, 2017 at 11:16
• <div class="collapse navbar-collapse" id="collapse-1"> <?php wp_nav_menu( array( 'theme_location' => 'header', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => false ) ); ?> </div> – sevoug Commented Jul 26, 2017 at 11:16
• For bootstrap 5: github/AlexWebLab/bootstrap-5-wordpress-navbar-walker – Lars Flieger Commented May 26, 2021 at 11:21

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 3

The easiest way to do this is to use an off-the-shelf solution. There is a WP_Bootstrap_Navwalker class which extends WordPress' native Walker_Nav_Menu class and makes your Navigation Menus ready for Bootstrap 3 or 4. Download it from GitHub.

Add it to your theme, then add the following to the functions.php:

<?php
require_once('path-to-the-directory/wp-bootstrap-navwalker.php');

Change path-to-the-directory/ to fit your needs.

Next, alter your wp_nav_menu() with the following code:

<?php
wp_nav_menu( array(
    'menu'              => 'header', // match name to yours
    'theme_location'    => 'header',
    'container'         => 'div', // no need to wrap `wp_nav_menu` manually
    'container_class'   => 'collapse navbar-collapse',
    'container_id'      => 'collapse-1',
    'menu_class'        => 'nav navbar-nav',
    'fallback_cb'       => false,
    'walker'            => new WP_Bootstrap_Navwalker() // Use different Walker
));

Note, that you don't need the <div class="collapse navbar-collapse" id="collapse-1"> anymore as it will be added by wp_nav_menu() with proper CSS classes and id.

Also, read the WP_Bootstrap_Navwalker README.md file carefully.

The easiest solution would be to use jquery in this case. You can add a new class in your functions.php file to check if the menu item has children and then add attributes to that item or use bootstrap nav walker as well. Here' I'm going with the easier one.

    $(document).ready(function(){
        $("ul.sub-menu").parent().addClass("dropdown");
        $("ul.sub-menu").addClass("dropdown-menu");
        $("ul#menuid li.dropdown a").addClass("dropdown-toggle");
        $("ul.sub-menu li a").removeClass("dropdown-toggle"); 
        $('.navbar .dropdown-toggle').append('');
        $('a.dropdown-toggle').attr('data-toggle', 'dropdown');
    });

Just copy it and paste it in your footer.php. For more details http://webtrickshome/faq/how-to-add-bootstrap-dropdown-class-in-wordpress-menu-item

you can use Walker_Nav_Menu class if you want to modify the default wordpress menu markup.

https://codex.wordpress/Class_Reference/Walker

https://www.youtube/watch?v=IqTMhmjTBoE&list=PLriKzYyLb28kpEnFFi9_vJWPf5-_7d3rX&index=19

本文标签： navigationAdd Bootstrap dropdown class to a nav menu