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

Chris O'Brien
Chris O'Brien
6,544 Points
Posted by Chris O'Brien
Chris O'Brien
6,544 Points

NavBar collapse overlapping on small device

When i put my Navbar in a container to have the text algin with the rest of the page, when i resize the window to small screen, the collapsable button(on the left) over laps the navbrand (on the right) and both are in the middle on top of each other.

<!-- Navigation -->
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <div class="container">
    <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>
    <a class="navbar-brand" href="#">Future Fit</a>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <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</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div><!--./Container-->
</nav>

2 Answers

Chris O'Brien
Chris O'Brien
6,544 Points
Chris O'Brien
Chris O'Brien
6,544 Points

Also when navbar-light and bg-fade are removed the collapse button is removed.

Rene Bitter
Rene Bitter
7,260 Points
Rene Bitter
Rene Bitter
7,260 Points

Had exactly the same here... Couldn't find any simple solution so I used media query and added a custom class to .container:

@media (max-width: 576px) { .navmargin { margin: 0; } }

Andy Watts
Andy Watts
20,836 Points
Andy Watts
Andy Watts
20,836 Points

This worked a treat. Thanks. Hopefully bootstrap will get this one fixed on the next release.