Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Framework Basics Prototyping with Bootstrap Building a Fixed Navbar

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?

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

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

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.

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;
    }
}