• Sunday , 5 April 2020

Bootstrap Tutorial for Beginners – 8 – Navbar Toggle Button

Code Canyon

Facebook – https://www.facebook.com/TheNewBoston-464114846956315/
GitHub – https://github.com/buckyroberts
Google+ – https://plus.google.com/+BuckyRoberts
LinkedIn – https://www.linkedin.com/in/buckyroberts
reddit – https://www.reddit.com/r/thenewboston/
Support – https://www.patreon.com/thenewboston
thenewboston – https://thenewboston.com/
Twitter – https://twitter.com/bucky_roberts

Original source

3d Ocean

Related Posts


  1. Ajitesh Das
    September 29, 2019 at 15:46

    for anybody facing issues with dropdowns and collapsible toggle, use:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script&gt;
    BS4 added popper.js in recent updates.
    also use the following for nav. (copied directly from BS4: https://getbootstrap.com/docs/4.0/components/navbar/):
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
    <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
    <form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

  2. Eman Mohammed
    September 29, 2019 at 15:46

    What makes this toggle button just appears in mob-size not in the large size ??

  3. Shahroz Zahid
    September 29, 2019 at 15:46

    sir plz help me icon bar color change or not in bootstrap 4?

  4. Celiber
    September 29, 2019 at 15:46


  5. Umesh Punia
    September 29, 2019 at 15:46

    collapse menu not working
    When I Click On Collapse Menu Not Items Come
    Please Help Me?

  6. Dezy XI
    September 29, 2019 at 15:46

    I find it interesting that this is like 5th video on this I'm watching and none of them work

  7. fonzoAhrak
    September 29, 2019 at 15:46

    Hi thanks for the tutorial, there is any way to put the toggle button on the left side of the nav bar?

  8. Rafał Płaszczyk
    September 29, 2019 at 15:46


  9. hizuka007
    September 29, 2019 at 15:46

    how can you put the navbar-brand at the center?

    Home…..About Us…… Contact Us……………………….NAVBARBRAND……………………………………Logout


  10. Andreas Chatzivasileiadis
    September 29, 2019 at 15:46

    There is a glyphicon for the hamburger icon:
    <span class=" glyphicon glyphicon-menu-hamburger" aria-hidden="true" style="color:white"></span>

  11. Mimouna Kerrout
    September 29, 2019 at 15:46


  12. Paul L
    September 29, 2019 at 15:46

    Tutorials great. Burger is delicious BUT when I click on it, no navigation shows. Just the burger with no links. How do we get it to open up and link to "home" "About" "contact" or whatever? – Thanks

  13. Ian Guya
    September 29, 2019 at 15:46

    thumbs up to that burger button lol

  14. Calvin K.
    September 29, 2019 at 15:46

    I dont get it working on my own Phone. I only get this toggle menu when scaling my desktop browser. Any ways to fix this?

  15. turquoise phase
    September 29, 2019 at 15:46

    Anyone else find this tutorials like "copying code from Google" ? :S

  16. Leo Hajder
    September 29, 2019 at 15:46

    there is a font awesome icon for the collapse button, it's called bars. <i class="fa fa-bars"></i>

    edit: there is an icon in bootstrap: <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>

  17. Rom Mel
    September 29, 2019 at 15:46

    Drop Down Menu Isnt working in any Browser!

  18. AffinityCL
    September 29, 2019 at 15:46

    If you're not getting the mobile menu to pop open — make sure you have your JQuery CDN in your header

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    Also.. make sure that is above the lines of code that have the Bootstrap CDN stuff since Bootstrap requires Jquery to work — good luck!

  19. Christian Mora
    September 29, 2019 at 15:46

    how can i change the active color? i change the navbar color but i need the active. PLEASE HELP

  20. omer farooq
    September 29, 2019 at 15:46

    God you are so good.

  21. Ryan Coughlan
    September 29, 2019 at 15:46

    My Navbar will expand when clicking the burger icon but not collapse when clicking again. Nothing in the console log either. Any ideas or is anybody else having this problem?

  22. Abhinav Kant
    September 29, 2019 at 15:46

    You wrote button 1st and THENEWBOSTON 2nd. How come its showing NEWBOSTON 1st and then button on the left ?? Please help

  23. Forest Capps
    September 29, 2019 at 15:46

    the navbar toggle isn't working in any browser. I used Notepad + and Dreamweaver, but neither of the browser previews activate the toggle feature.

  24. Richard Zeng
    September 29, 2019 at 15:46

    I got the icon and the list doesn't show. However, the menu will not drop down. Is there a resolution to this issue? This is the same for the dropdown menu in lesson 7 as well.
    Thank you!

  25. Abhishek Choudhary Khatkar
    September 29, 2019 at 15:46

    What if i want that collapse without shrinking the window size?
    How can i get that collapse button on desktop size?

  26. sid kan
    September 29, 2019 at 15:46

    i have several pages which i kept in a folder when i run any of the page in that folder that toggle button doesn't work
    my main page is outside the folder
    please help

  27. onescYT
    September 29, 2019 at 15:46

    These tutorials are great, easy to follow and I feel like im blasting through them. Thanks a lot.

  28. jc4kaydan
    September 29, 2019 at 15:46

    How do you change the color of the toggle button when you hover over it? And the border color of it please?
    It's also moving my logo down and if I do a "fixed" position on my logo then the toggle button hides behind it when the screen gets small enough. Help please. Thanks!

    Ok help with just the logo please. I found where the bg color is! =D

  29. Dex W
    September 29, 2019 at 15:46

    Sneaky "#" infront of the data-target caught me

  30. Charles Wright
    September 29, 2019 at 15:46

    Would it not be easier to use a glyph… 

    glyphicon glyphicon-menu-hamburger

  31. escapeplan4
    September 29, 2019 at 15:46

    nav bar menu didn't toggle even though I've included latest jQuery

  32. UTWY
    September 29, 2019 at 15:46

    You could have also used the built-in Glyphicons for the toggle instead of each line, specifically "glyphicon glyphicon-menu-hamburger" as the style for one span.

  33. Ninad Gaikwad
    September 29, 2019 at 15:46

    My navbar isn't collapsing. I have copied the code exactly. Can you please post full code on forum please?

  34. Aloykatos PC Tech
    September 29, 2019 at 15:46

    More More More!!!

  35. Shekhar Gupta
    September 29, 2019 at 15:46

    Bucky 🙁 
    I want these videos before…:(

Leave A Comment

You must be logged in to post a comment.