WordPress Theme With Bootstrap [3] – Menu With Dropdown



https://i.ytimg.com/vi/t-AGjdMrtdA/hqdefault.jpg



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 dropdowns in WordPress menus

Project Files – https://github.com/bradtraversy/wpbootstrap_theme

10 PROJECT WORDPRESS THEME COURSE: https://www.eduonix.com/affiliates/id/16-10405

Original source


26 responses to “WordPress Theme With Bootstrap [3] – Menu With Dropdown”

  1. Everything went well untill this part. I can't change the style of my menu from blue to white. I copied everything, but don't know why it doesn't work. When I select the "home" button in developers mode, it says after the "a{" "bootstrap.css:1099" does that mean that the code is only in bootstrap.css? Can someone please help me?!

  2. If someone has Problem with this change the code to the example from the WP Bootstrap Navwalker Site.
    <nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
    <div class="container">
    <!– Brand and toggle get grouped for better mobile display –>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <?php
    wp_nav_menu( array(
    '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(),
    ) );
    ?>
    </div>
    </nav>
    The only Problem is that you have to make a new css that it looks good.

  3. jesus I was all day trying to sort this out, the only thing that worked for me was to copy the bit of code require_once('wp_bootstrap_navwalker.php'); from the the dowloaded file, which is exactly as I wrote lol
    give it a try ….

  4. Alright this is where I hop in… I have tried almost everything till this stage of this tutorial…

    >> For all those who get the Fatal error… Just download the github link that is provided in this tutorial…

    >> Next, will be the disappearing nav-bar at phone resolution. What we can do is to copy this code

    <nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">

    <div class="container">

    <!– Brand and toggle get grouped for better mobile display –>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

    </button>

    <a class="navbar-brand" href="#">Navbar</a>

    <?php

    wp_nav_menu( array(

    '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(),

    ) );

    ?>

    </div>

    </nav>

    >> and replace the earlier code i.e…

    <div class="blog-masthead">

    <div class="container">

    <nav class="blog-nav">

    <?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>

    >> In front-page.php remove the whole bar code cause there is no point of giving it in a separate place. Its already there in the header.php. So remove this code…
    P.S: this is the same code as in the earlier step

    <div class="blog-masthead">

    <div class="container">

    <nav class="blog-nav">

    <?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>

    >> Next, in front-page.php. Just above this code: <?php wp_head(); ?>. Add this code…

    <?php get_header(); ?>
    //it will give the same header as before in front-page.php.

    >> I didn't want my site title to be displayed under the nav-bar. It looked awkward so I removed the following code from header.php.

    <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>

    >> Now go to style.css and as we have removed the earlier nav-bar with a new code. We need to remove some codes from style.css. Remove these codes

    .blog-masthead {

    background-color: #428bca;

    -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 */

    .blog-nav-item {

    position: relative;

    display: inline-block;

    padding: 10px;

    font-weight: 500;

    color: #cdddeb;

    }

    .blog-nav-item:hover,

    .blog-nav-item:focus {

    color: #fff;

    text-decoration: none;

    }

    >> Replace it with… This code…

    .navbar {
    background-color: #428bca;
    padding: 0.5rem 0 0 0;
    -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
    box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
    }

    .navbar li a{
    color:#fff;
    }

    /* Nav links */
    .navbar-toggler {
    position: relative;
    display: inline-block;
    background-color: #fff;
    font-weight: 500;
    color: #cdddeb;
    border: 0.1rem solid #fff;
    }

    .navbar-toggler:before,
    .navbar-toggler:after{
    content: "";
    position: absolute;
    width: 13px;
    border: 0.1rem solid #fff;
    height:0.3rem;
    background-color: #fff;

    }

    .navbar-toggler:before{
    top:-1rem;
    left:0;
    }

    .navbar-toggler:after{
    right:0;
    bottom:-1rem;
    }

    @media only screen and (min-width: 768px) {
    .navbar-toggler{
    display: none;
    }
    }

    .blog-nav-item:hover,
    .blog-nav-item:focus {
    color: #fff;
    text-decoration: none;
    }

    …This will solve the issue of the nav-bar for mobile resolution.

    Next you will notice that when you open navbar in phone resolution, it works fine on front-page.php but not any other. For that you will have to copy the codes… from front-page.php

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script&gt;
    <script src="<?php bloginfo('template_url'); ?>/bootstrap.js"></script>
    //it contains the the toggle feature controlled by javascript

    >> Paste it in header.php and then you will be able to use the toggle feature perfectly on every other page as well.

    I might be missing some aspects but even my project is a work-in-progress. It's just that I didn't want others to spend countless hours thinking over nav walker.

    You are free to add and make the above codes more efficient. This is just my knowledge at work…

  5. this is the probem that i have faced . how to remove it?
    Fatal error: Uncaught Error: Class 'wp_bootstrap_navwalker' not found in /opt/lampp/htdocs/wptheme/wp-content/themes/wptheme/header.php:34 Stack trace: #0 /opt/lampp/htdocs/wptheme/wp-includes/template.php(688): require_once() #1 /opt/lampp/htdocs/wptheme/wp-includes/template.php(647): load_template('/opt/lampp/htdo…', true) #2 /opt/lampp/htdocs/wptheme/wp-includes/general-template.php(41): locate_template(Array, true) #3 /opt/lampp/htdocs/wptheme/wp-content/themes/wptheme/index.php(1): get_header() #4 /opt/lampp/htdocs/wptheme/wp-includes/template-loader.php(74): include('/opt/lampp/htdo…') #5 /opt/lampp/htdocs/wptheme/wp-blog-header.php(19): require_once('/opt/lampp/htdo…') #6 /opt/lampp/htdocs/wptheme/index.php(17): require('/opt/lampp/htdo…') #7 {main} thrown in /opt/lampp/htdocs/wptheme/wp-content/themes/wptheme/header.php on line 34

  6. hi buddy ,its a great video i… i have done exact same and used same template when menu was replaced with following code the hovering of menu width is full screen can uh tell me y is that so and how can i overcome it
    <?php
    wp_nav_menu( array(
    'menu' => 'primary',
    'theme_location' => 'primary',
    'depth' => 2,
    'container' => 'false',
    'menu_class' => 'nav nav-list',
    'fallback_cb' => 'wp_bootstrap_navlist_walker::fallback',
    'walker' => new wp_bootstrap_navlist_walker())
    );
    ?>

  7. So I am following along with the Nav Walker setup and I noticed that for some reason when I click on the drop down menu it looks like the menu is going behind the main content or id doesn't show the dropdown I should say. Any ideas why?

  8. For anyone having issues with the Nav Bar styling not showing up, go to the header.php file and add "nav" to the 'menu_class' array. When I copied the code from github it didn't have that class selector.

  9. don't get it, my page now just loads to the github navwalker page, followed everything to the letter.. copied the old wp_bootsrap_navwalker from his github reources folder.. got bootstrap 3.3.7 cdn.. what am i doing wrong??

Leave a Reply