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 gennady
gennady
14,145 Points

What is the logic for investigating problems with Bootstrap?

Hi, everybody! I made a navbar and have a couple of problems with it: 1) I have a "sm" breakpoint and "hidden-sm-down" class for the "navbar-brand". When display is resized for, the navbar dissapear and I see only a tiny line above. 2) If I remove the "hidden-sm-down" class for the "navbar-brand" that works, but when the menu is toggled on the "sm" screen, the humburger menu icon is overlapping with the menu. I made a codepen illustrating that problem: https://codepen.io/majesticgenie/pen/bRMeNx?editors=1000 The code is below. I'm interested how to resolve those problems, but morever I would like to understand the logic behind that proccess of investigation. When I use vanilla css, google devTools often help me, but when I use bootstrap everithing is much more complicated...

Thanks for all your help! =)

<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary">
  <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home<span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#about">About</a>
      <a class="nav-item nav-link" href="#speakers">Speakers</a>
      <a class="nav-item nav-link" href="#schedule">Schedule</a>
    </div>
  </div><!--  navbarNavAltMarkup  -->
  <a class="navbar-brand ml-auto hidden-sm-down"  href="https://teamtreehouse.com/">Presented by Treehouse</a>
</nav>
Chris Seale
Chris Seale
24,718 Points
Chris Seale
Chris Seale
24,718 Points

I think this really revolves around you learning the classes and basics of Bootstrap a bit better, which luckily, happens pretty fast. Essentially, the same process you use to investigate problems with vanilla css is the same, as the classes in Bootstrap really are just shorthands classes for mainstream things that are used over and over again in vanilla css. That's not to say you'll have to learn everything about Bootstrap, but just a bit of knowledge and you'll have the basics and know kind of what isn't working the way it should. While you're learning, the bootstrap site has the basic documentation well done on one or two pages, so consult that. Good luck!

3 Answers

Max Weir
Max Weir
14,963 Points
Max Weir
Max Weir
14,963 Points

Investigating further because the hidden-sm-down is applied to .navbar-brand the nav has nothing to set its actual height. Because the menu button is positioned absolutely it relies on block elements to set the navs height e.g logo, text, form element etc.

gennady
gennady
14,145 Points

Thanks Max! I've already figured out this situation. But what I can't understand is why develovers made Navbar solution so fragile and dependend on .navbar-brand? I want to get rid of it, but I don't no how to keep nav heigh while content being absent.

Max Weir
Max Weir
14,963 Points
Max Weir
Max Weir
14,963 Points

You have .navbar-toggler-left with an absolute position therfore leaving almost no height within the nav, was the absolute positioning intentional?

gennady
gennady
14,145 Points

Thanks, Chris! I'll continue to learn more.

Max, no, I just followed bootstrap4 tamplate for Navbar (http://v4-alpha.getbootstrap.com/components/navbar/#supported-content), and just changed it from right to left. I think it should be quite appropriate.

Max Weir
Max Weir
14,963 Points
Max Weir
Max Weir
14,963 Points

It's still in alpha so things could change at any time. It is strange to see as they have moved to use flexbox vs their current method (floats). Instead of absolute positioning, I'd expect them to utilise all flexbox properties to align elements instead which should be the reason to adopt it in the first place.

Hope you got your answers anyways and all the best!