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) Building Forms with Bootstrap Custom CSS

Posted by Hendrik /
Hendrik /
13,961 Points

Collapsible Nav Bar

Hi!

I was trying to built this collapsible navbar (which Guil mentioned at the end) , so that the menu is only shown on smaller devices if you click on the navicon. But I don't know how I can hide the navicon-button and menu the smartest way with bootstrap.

http://v4-alpha.getbootstrap.com/components/navbar/#collapsible-content

Would you share your solution with me? :)

Quinn Hugo
Quinn Hugo
6,392 Points

To hide nav icon on small screens up add "hidden-sm-up" to button class:

          <nav class="navbar navbar-dark navbar-fixed-top bg-primary">
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
    &#9776;
  </button>
          ```
To hide original nav bar on extra small screens add "hidden-xs-down" to navbar class:
```html
          <nav class="navbar navbar-fixed-top navbar-dark bg-primary hidden-xs-down"> 
        <div class = "container">
          ```
Hope that helps.
Hendrik /
Hendrik /
13,961 Points

Hey Quinn! Thank you! The problem still is that, the the menu should only be visible if you would click on the navicon. But if I would add hidden-xs-down the ul or nav , it would never show the menu if you'd click on it. And if wouldn't use hidden-xs-down the navicon and menu would be stacked.

3 Answers

Harish Yerra
Harish Yerra
10,031 Points
Harish Yerra
Harish Yerra
10,031 Points

Hey there, Remember the responsive utilities we used? (http://v4-alpha.getbootstrap.com/layout/responsive-utilities/) I used that to actually hide the navbar (not the collapsable one) once it reached the extra small size.

Here is some code to look at:

<nav class="navbar navbar-fixed-top navbar-dark bg-primary hidden-sm-down">

This code hides the big navbar once it reaches extra small sizes. Then you have to create an extra collapsable navbar below the big navbar.

Abdirahman Shire
Abdirahman Shire
12,987 Points
Abdirahman Shire
Abdirahman Shire
12,987 Points

These are the code snippets.

place the code snippets between first nav and div container

<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">

then close the div.

the whole navbar code snippets are here......

<!-- nav-->


    <nav class="navbar navbar-dark bg-primary navbar-fixed-top">

     <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">

      <div class="container">
          <ul class="nav navbar-nav">
            <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 pull-sm-right m-r-0 hidden-xs-down">Prsented by Treahouse</a>
        </div>
    </div>
</nav>  
<!-- /nav-->

Hope that helps.

Vid Majkus
Vid Majkus
10,005 Points
Vid Majkus
Vid Majkus
10,005 Points

Thank you! I had the same problem and it works now! :D