Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap 4 Basics (Retired) Using Bootstrap Components Building a Navbar

Posted by Bhrugen Patel
Bhrugen Patel
Courses Plus Student 991 Points

My Navbar just dissapears when i moveto md size.

I have a feeling this has to do with navbar-toggleable-md in nav class. Could someone please explain? Also what do i need to do to correct in small screen?

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#speakers">Speakers</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#schdeule">Schedule</a>
                    </li>
                </ul>
                <a class="navbar-brand mr-0" href="http://www.teamtreehouse.com/">Presented by Treehouse
                </a>
            </div>
        </nav>
Steven Snary
Steven Snary
17,540 Points
Steven Snary
Steven Snary
17,540 Points

Your Navbar isn't disappearing (change the background color to red and you'll see it's still there) - but it is collapsing due to the way that Bootstrap 4 implements it's collapsable navigation.

A quick an easy fix is to move your brand link outside the <div> with the class of "navbar-collapse" - this way there is something left in the between the <nav> tags when the <div> collapses.

You code would look like this...

      <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#speakers">Speakers</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#schdeule">Schedule</a>
                    </li>
                </ul>
            </div>
            <a class="navbar-brand mr-0" href="http://www.teamtreehouse.com/">Presented by Treehouse</a>
        </nav>

The other fix, and this is what you'd probably use in "the real world" is to add a hamburger menu icon when the navbar collapses - you do that by adding the following code after your opening <nav> tag but before your opening <div> tag...

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

Either way you must have some content outside of the <div> tags to stop the collapsing with the smaller breakpoints

I hope this helps and that you find it useful - Please mark this answer as the best one if you feel it is worthy, Thanks!

2 Answers

Dmitry Belov
Dmitry Belov
3,872 Points
Dmitry Belov
Dmitry Belov
3,872 Points

Try this:

<nav class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-primary">

      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="container">
      <a class="navbar-brand hidden-md-up" href="#">Presented by Treehouse</a>
      <div class="collapse navbar-collapse" id="navbarNav">
        <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="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#speakers">Speakers</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#schedule">Schedule</a>
          </li>
        </ul>
        <a class="navbar-brand pull-sm-right hidden-sm-down" href="http://www.treehouse.com">Presented by Treehouse</a>
     </div>
    </div>
    </nav>
gennady
gennady
14,145 Points

Nice snippet, Dmitry! it helped me much! Thanks!

Julie Heckleman
PLUS
Julie Heckleman
Courses Plus Student 11,412 Points
Julie Heckleman
Julie Heckleman
Courses Plus Student 11,412 Points 
<!--  navbar  -->
    <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse mr-auto" id="navbarNav">

          <ul class="navbar-nav ">
            <li class="nav-item active">
              <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#speakers">Speakers</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#schedule">Schedule</a>
            </li>
          </ul>

      </div>
      <a class="navbar-brand" href="http://www.teamtreehouse.com">Presented by Treehouse</a>
    </nav>
    <!--  /navbar  -->

Be sure that the navbar-brand comes AFTER the closing div tag that holds the ul list. Otherwise it screws up the collapse if it is placed directly after the ul tag.