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 Framework Basics Prototyping with Bootstrap Building a Fixed Navbar

Monisha Kumar
Monisha Kumar
208 Points
Posted by Monisha Kumar
Monisha Kumar
208 Points

How to get my nav-right elements to wrap below the brand (in small displays) instead of using a toggle btn?

I wanted to have the nav-right elements (in this case.. the 'home', 'about ribbit', 'treehouse' ) appear below the brand instead of usign a collapsible button... How to do this?

Andrew Stelmach
Andrew Stelmach
12,583 Points

I'm not sure exactly what you mean by a 'toggle button', but if you want the nav bar to sit under the brand/logo on small displays:

  • In your HTML make sure that your nav bar div is placed after your brand div and before any other divs.

  • divs are 'block' elements by default so, unless you have given them 'display: inline' or 'inline-block' or 'float' in the css, your nav bar element should be sitting under your brand element.

Simon Latham
Simon Latham
Courses Plus Student 6,261 Points
Simon Latham
Simon Latham
Courses Plus Student 6,261 Points

Without looking at the code, I would say you probably need to make some amendments to the css media queries. Your browser's developer tools will be a great asset to help you identify the various elements.

2 Answers

Joseph Gennitti
Joseph Gennitti
16,870 Points
Joseph Gennitti
Joseph Gennitti
16,870 Points

You are basically referring to bootstrap commands from what I've read. you should check the getbootstrap.com documentation but I've done that course and I think it's because the bootstrap navbar is in same container as brand. Maybe put it in different row class then a new container class below brand might solve your problem. Then take out the class="navbar-collapse" is what's probably causing the toggle button. and add a grid too it like class="col-sm-3" or like Simon said try a media query, but Look in the get bootstrap docs under navigation, they have good examples. Good luck.

Nijad Kifayeh
Nijad Kifayeh
6,092 Points
Nijad Kifayeh
Nijad Kifayeh
6,092 Points

What you need to do is basically to remove the toggle button code, remove the collapsing div, add a media query so that when in mobile view you add top padding to the UL (to move it down so the brand shows) and add padding-left to line up the links with the brand.

Here's the code you need: 

<!-- Navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">

        <!-- Brand -->
        <a class="navbar-brand text-muted" href="#">Ribbit</a>

          <!-- NAV -->
          <ul class="nav navbar-nav navbar-right" id="top">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About Ribbit</a></li>
            <li><a href="#">Treehouse</a></li>
          </ul>

        </div>
        <!-- end container -->
    </div>
    <!-- End navbar -->

And add this to your custom CSS: 

@media (max-width: 768px) {
    #top {
        padding-top: 40px;
        padding-left: 15px;
    }
}