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 tomsteward
tomsteward
550 Points

When my nav collapses it sometimes has to be clicked repeatedly to open and close. Can anyone help?

When the nav collapses it is really temperamental. It often needs to be clicked on numerous times to open and close. Does anyone have any ideas? Maybe jQuery related?

Any help would be reeeeaaaaallly really appreciated.

tomsteward
tomsteward
550 Points

Oh, you can inspect it at tomstewardmedia.com/broken-nav

4 Answers

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

looking at your code, it looks like you are using bootstrap and that the menu is set up as a "button". I am not sure if you are using bootstrap 3 or 4 but from 4 you should be following

  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>

<div class="collapse" id="collapseExample">
  <div class="card card-block">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

and yours

<button class="navbar-toggle" type="button"  data-toggle="collapse" data-target=".navbar-main-collapse">
                    Menu <i class="fa fa-bars"></i>
                </button>

<div class="navbar-collapse navbar-right navbar-main-collapse collapse in" aria-expanded="true">
                <ul class="nav navbar-nav">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#download">Download</a>
                    </li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Conact <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Social</a></li>
                </ul>
            </li>
                </ul>
            </div>

so maybe try

<button class="btn navbar-toggle" type="button" data-toggle="collapse" data-target="#collapseThis" aria-expanded="false" aria-controls="collapseThis">                    
     Menu <i class="fa fa-bars"></i>
</button>

here you maintain the class of btn, type of button, and data-toggle of collapse as in yours. I am not sure if you need an ID but, I would add in an ID into the div class so it points to the correct thing. and that is what is used in both data-target and aria-controls. You set aria-expanded to false so that it doesn't start open. If you put true, the menu will start in the open position. I don't know what navbar-toggle, fa and fa-bars are but assume they are styling techniques

for the div class maybe try

<div class="collapse navbar-collapse navbar-right navbar-main-collapse" id="collapseExample">
                <ul class="nav navbar-nav">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden"><a href="#page-top"></a></li>
                    <li><a class="page-scroll" href="#about">About</a></li>
                    <li><a class="page-scroll" href="#download">Download</a> </li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Conact <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Social</a></li>
                </ul>
            </li>
                </ul>
</div>

Again, a lot of the classes in this div I assume are for your own styling but, could be removed if not.

tomsteward
tomsteward
550 Points

Hi Erik. Thanks so much for taking time look at my code.

I've tried to implement what you suggested but it doesn't seem to work. The nav collapses, but when I click on the "Menu" button, nothing happens other than the active state.

Again though, really appreciate your time. Thanks

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

maybe try simplifying further and getting rid of some of the additional classes until it works properly? I also messed up and created the collpaseThis for the data target and then didn't change the ID to that. Maybe that will fix it.

<button class="btn" type="button" data-toggle="collapse" data-target="#collapseThis" aria-expanded="false" aria-controls="collapseThis">                    
     Menu <i class="fa fa-bars"></i>
</button>

<div class="collapse" id="collapseThis">
                <ul class="nav navbar-nav">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden"><a href="#page-top"></a></li>
                    <li><a class="page-scroll" href="#about">About</a></li>
                    <li><a class="page-scroll" href="#download">Download</a> </li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Conact <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Social</a></li>
                </ul>
            </li>
                </ul>
</div>
tomsteward
tomsteward
550 Points

Thanks again. Here's a link to what's happening now. http://tomstewardmedia.com/broken-nav2/

Code can be a lonely old game when something doesn't work, so thanks again.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points 
<nav class="navbar navbar-fixed-top navbar-light bg-faded hidden-xs-down">
      <ul class="nav navbar-nav">
        <li class="hidden nav-item">
            <a href="#page-top"></a>
        </li>
        <li class="nav-item">
            <a class="nav-link page-scroll" href="#about">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link page-scroll" href="#download">Download</a>
        </li>
        <li class="dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Contact <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a class="nav-link" href="#">Contact</a></li>
                    <li><a class="nav-link" href="#">Social</a></li>
                </ul>
        </li>
      </ul>
</nav>      


<nav class="navbar navbar-light bg-faded">
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseThis" aria-controls="collapseThis" aria-expanded="false" aria-label="Toggle navigation">
     Menu <i class="fa fa-bars"></i>
  </button>
 <div class="collapse" id="collapseThis">
      <ul class="nav navbar-nav">
        <li class="hidden nav-item">
            <a href="#page-top"></a>
        </li>
        <li class="nav-item">
            <a class="nav-link page-scroll" href="#about">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link page-scroll" href="#download">Download</a>
        </li>
        <li class="dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Contact <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a class="nav-link" href="#">Contact</a></li>
                    <li><a class="nav-link" href="#">Social</a></li>
                </ul>
        </li>
      </ul>
  </div>
</nav>

This will work. However, you will need to fix the color scheme. You can also change when the menu button will appear based on the "hidden-sm-up" class under the button tag. And change the class of the first navbar from hidden-xs-down to whatever size you want things to work at.

The reason there are two sets of navs, the top one controls it in normal view and the bottom controls the collapable portion.

You will also notice that Download and Contact are right on top of each other. They need either margin or padding to spread them out.

You just need to fit in your custom colors you created in your CSS file. and spacing etc.

tomsteward
tomsteward
550 Points
tomsteward
tomsteward
550 Points

Thanks again, although still not working for me.

I'm running Bootstrap 3, is your code for 4?

Erik Nuber
Erik Nuber
20,629 Points

Yes it is. Wasn't sure which you were on. I know three is norm right now but 4 is being released soon and, I did the courses here which also were on bootstrap 4.