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

HTML

Posted by charlotte Hanly
charlotte Hanly
1,956 Points

Navbar shrinking too small on mobile devices

My navbar is too small when it is being displayed on small devices. So the button for the menu is much larger than the navigation which makes it appear broken. 

<nav class="navbar fixed-top navbar-toggleable-md 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="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="#schedule">Schedule</a>
          </li>
    </ul>
    <a class="navbar-brand mr-0" href="http://www.teamtreehouse.com/">
        Presented by Treehouse
    </a>
</div>
</nav>

1 Answer

Andrei Duhanes
Andrei Duhanes
14,155 Points
Andrei Duhanes
Andrei Duhanes
14,155 Points

Hi Charlotte,

It is basically a padding issue, as if you take a look at the inspect element, you will notice if you play around with the padding it will amend it. So a fix could be to add a custom css to your navbar class and add ( padding -bottom: 3em !important, and add it within the @media screen and (min-width: 400px) and (max-width: 1000px) {} so that it would not affect on your normal size.

Another way is to add your custom class to the <nav> tag and simply do the same thing but without !important. Hope it helps! Good luck.