Bootstrap Tutorial for Beginners – 8 – Navbar Toggle Button


https://i.ytimg.com/vi/CPvZzJlUz20/hqdefault.jpg



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

35 thoughts on “Bootstrap Tutorial for Beginners – 8 – Navbar Toggle Button

  • September 29, 2019 at 15:46
    Permalink

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

    <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>
    <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
    </li>
    <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">
    Dropdown
    </a>
    <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>
    </div>
    </li>
    <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
    </li>
    </ul>
    <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>
    </form>
    </div>
    </nav>

  • September 29, 2019 at 15:46
    Permalink

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

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

    ++++++++++++++++++++++++++++++++++++++++++++++

  • September 29, 2019 at 15:46
    Permalink

    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

  • September 29, 2019 at 15:46
    Permalink

    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?

  • September 29, 2019 at 15:46
    Permalink

    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>

  • September 29, 2019 at 15:46
    Permalink

    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?

  • September 29, 2019 at 15:46
    Permalink

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

  • September 29, 2019 at 15:46
    Permalink

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

  • September 29, 2019 at 15:46
    Permalink

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

  • September 29, 2019 at 15:46
    Permalink

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

  • September 29, 2019 at 15:46
    Permalink

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

  • September 29, 2019 at 15:46
    Permalink

    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

  • September 29, 2019 at 15:46
    Permalink

    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.

Leave a Reply