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 thoughts on “WordPress Theme With Bootstrap [3] – Menu With Dropdown

  • April 2, 2020 at 18:04
    Permalink

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

  • April 2, 2020 at 18:04
    Permalink

    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.

  • April 2, 2020 at 18:04
    Permalink

    kinda having problem with adding the bootstrap of css. I cant go to php after the double qoute
    my code is pasted below
    <link href=" <?php bloginfo('stylesheet_uri'); ?> " rel="stylesheet">

  • April 2, 2020 at 18:04
    Permalink

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

  • April 2, 2020 at 18:04
    Permalink

    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…

  • April 2, 2020 at 18:04
    Permalink

    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

  • April 2, 2020 at 18:04
    Permalink

    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())
    );
    ?>

  • April 2, 2020 at 18:04
    Permalink

    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?

  • April 2, 2020 at 18:04
    Permalink

    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.

  • April 2, 2020 at 18:04
    Permalink

    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