0

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>
  • What's your code to build a nav menu without dropdown class? – Max Yudin Jul 26 '17 at 11:15
  • Go through this link, you will get the idea. codex.wordpress.org/WordPress_Menu_User_Guide – aananddham Jul 26 '17 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 Jul 26 '17 at 11:16
2

There easiest way to do this is to use 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. Download it from GitHub.

Second, make it available for WordPress. Add 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.

1

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.com/faq/how-to-add-bootstrap-dropdown-class-in-wordpress-menu-item

0

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

https://codex.wordpress.org/Class_Reference/Walker

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.