In this video I will show you how to create a Bootstrap navbar to be used in your WordPress theme using the navwalker class. We will be able to utilize …

source

29 Comments

  1. Thanks for sharing such wonderful work with the community, you are a great teacher and highly knowledgable, I can't tell you how much I've learned from you and how grateful I am 🙂

  2. Thank you Brad! This is the CSS I used to make the menu look nice. Paste it over the same CSS sections in style.css.

    /*
    * Masthead for nav
    */

    .blog-masthead {
    background-color: #337AB7;
    -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
    box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
    }

    /* Nav links */
    #menu-main-menu > .menu-item > a {
    position: relative;
    display: inline-block;
    padding: 10px;
    font-weight: 500;
    color: #cdddeb;
    background-color: #337AB7;
    }
    #menu-main-menu a:hover,
    #menu-main-menu a:focus {
    color: #fff;
    text-decoration: none;
    background-color: #428bca;
    }

    /* Active state gets a caret at the bottom */
    #menu-main-menu .active > a {
    color: #fff;
    }
    #menu-main-menu > .active:after {
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -5px;
    vertical-align: middle;
    content: " ";
    border-right: 5px solid transparent;
    border-bottom: 5px solid;
    border-left: 5px solid transparent;
    }

    I also modified the HTML in my header.php like this:

    <div class="blog-masthead" role="navigation">
    <div class="container">

    <?php
    wp_nav_menu( array(
    'theme_location' => 'primary',
    'container' => 'nav',
    'container_class' => 'collapse navbar-collapse blog-nav',
    'container_id' => 'bs-example-navbar-collapse-1',
    'menu_class' => 'nav navbar-nav',
    'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
    'walker' => new WP_Bootstrap_Navwalker())
    );
    ?>
    </div>
    </div>

    And I added this in footer.php to make the dropdown menu active if one of its items is active:

    <script>
    $(function() {
    // add .active class to top menu list item if one of the dropdown items is .active
    $("#menu-main-menu .dropdown-menu").each(function() {
    if ($(this).find(".menu-item").hasClass("active")) {
    $(this).parent().addClass("active");
    }
    });
    });
    </script>

  3. Hey Brad! Thx for your tutorial, it's very helpful!!! But doesn't work menu in mobile version. not dropdown – whole menu/ plz can you help???

  4. Here's the thing… Parse error: syntax error, unexpected 'function' (T_FUNCTION) in C:wampwwwwordpresswp-contentthemeswpbootstrapfunctions.php on line 6

    any ideas?

  5. Dropdown menu is not working! Help!

    My Header.php Code

    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!– The above 3 meta tags must come first in the head; any other head content must come after these tags –>
    <meta name="description" content="<?php bloginfo('description'); ?>">

    <title>
    <?php bloginfo('name'); ?> |
    <?php is_front_page() ? bloginfo('description') : wp_title(); ?>
    </title>
    <?php wp_head(); ?>
    <!– Bootstrap core CSS –>
    <link href="<?php bloginfo('template_url'); ?>/css/bootstrap.css" rel="stylesheet">
    <!– Custom styles for this template –>
    <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">

    </head>
    <body>
    <div class="blog-masthead">
    <?php
    wp_nav_menu( array(
    'menu' => 'primary',
    'theme_location' => 'primary',
    'depth' => 2,
    'container' => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id' => 'bs-example-navbar-collapse-1',
    'menu_class' => 'nav navbar-nav',
    'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
    'walker' => new wp_bootstrap_navwalker())
    );
    ?>
    </nav>
    </div>
    </div>

    <div class="container">
    <div class="blog-header">
    <h1 class="blog-title"><?php bloginfo('name'); ?></h1>
    <p class="lead blog-description"><?php bloginfo('description'); ?></p>
    </div>

    Function.php code

    <?php
    // Register Nav Walker class_alias
    require_once('wp-bootstrap-navwalker.php');

    // Theme Support
    function wpb_theme_setup(){

    // Nav Menus
    register_nav_menus(array(
    'primary' => __('Primary Menu')
    ));
    }
    add_action('after_setup_theme','wpb_theme_setup');

  6. Here is the code:

    <?php
    wp_nav_menu( array(
    'menu' => 'primary',
    'theme_location' => 'primary',
    'depth' => 2,
    'container' => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id' => 'bs-example-navbar-collapse-1',
    'menu_class' => 'nav navbar-nav',
    'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
    'walker' => new wp_bootstrap_navwalker())
    );
    ?>

  7. Hi, I can't show the menu admin. I have been working register menu in function.php but i still seem it. can you help me ?

  8. if you are having problems with the nav bar not working properly, specifically, not dropping down for sub menus and in mobile version check your console in the browser developer tools for an error calling the jquery file. This can be fixed by adding the correct directory path in the footer like this –
    <script src="<?php bloginfo('template_url'); ?>/js/jquery-1.11.3.min.js"></script>
    That fixed mine and everything operates properly.

  9. If anyone is having trouble, the navwalker in this tut doesn't seem to exist anymore. The current file I found was at a github address wp-bootstrap/wp-bootstrap-navwalker and the PHP file now uses dashes instead of underscores. So, the register once line in functions.php reads like this: require_once('wp-bootstrap-navwalker.php');

  10. I didn't try out your tutorial yet, asking beforehand: Is it possible to link to a page via main menu element even if it has the dropdown or is it only possible to hover those and open the dropdown?

  11. Though I've followed all your instructions, still I'm getting a fatal error. Fatal error: Class 'wp_bootstrap_navwalker' not found in C:xampphtdocswordpresswp-contentthemeswpbootstrapheader.php .Please help.

  12. I had to manually register navigation menus for my theme first to get things working like Brad's example. Thank you all the same..

  13. menu tab not showing up in dashboard appearance and error occurred in the menu bar saying:

    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'wpb_theme_setup' not found or invalid function name in C:xampphtdocstestswordpresswp-includesclass-wp-hook.php on line 298.

    Your theme does not support navigation menus or widgets.

  14. Hey Brad my nav abr dissapears after I replace the <a> tags in my header.php file with the code from Github. How do I get back the nav bar? Thanks

  15. Guys I need somebody help
    I have a menu, dropdown menu, it works fine. But in HTML I had an "<a><span>MAIN</span></a>" construction, this is awesome, cuz I want to underline only the MAIN, not MAIN and some more space from right and from left (tag <a>). So my question is "How can I add <span> tag inside <a> tag? Thanks :3

  16. Hello Brad, I have been working with the navwalker plugin and I had a lil problem. I managed to make it work on full-screen menu but when I reduced the size of the menu, the menu collapse doesn't work. Can you help?

  17. hey thanks for this video, helped me a lot ! Do you you know how to apply css classes to links within the list items ?

  18. Does the dropdown menu only work when the menu item is clicked instead of hover? I couldn't tell in the video if you were clicking or hovering on the link. I'd like to have it drop down on hover

  19. Hi Brad. Thank you for this amazing series! I have a question: the WordPress admin-bar overlapping my bootstrap navbar-fixed-top (I prefer this navbar mod), so what can I do for fix this?

    I really appreciate your help.

Leave A Reply

Please enter your comment!
Please enter your name here