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

Development Tools

Sean Pierce Sumler
Sean Pierce Sumler
18,968 Points
Posted by Sean Pierce Sumler
Sean Pierce Sumler
18,968 Points

Bootstrap responsive burger menu not functioning on mobile device.

Hello world!

I'm having trouble with bootstrap's responsive burger menu on my mobile device.

On my desktop, everything functions as it should. I resize the window to a point where the menu collapses into a burger, I click the burger, the burger expands to reveal the links nested within. It's excellent!

However- once I push my code up to my server and view the page on my mobile device, I notice that the burger menu is unresponsive. I try to click it, but nothing happens and the links within are inaccessible.

I used chrome's developer tools to test the page with their mobile preview and everything there seems to work properly. I also checked for script errors and there are none.

here is the code:

<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" /> <meta name="language" content="english" /> <meta name="description" content="example." />

<title>example</title>

<!-- css imports --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/animation.css"> <!-- end css imports --> </head> <body> <!-- navbar wrapper --> <div class="navbar-wrapper"> <div class="container"> <div class="navbar navbar-inverse navbar-fixed-top">

  <div class="navbar-header">
    <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </a>
    <a class="navbar-brand" href="#">Sean Pierce</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#about">About</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#experience">Experience</a></li>
    <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
</div>

</div> <!-- /container --> </div> <!-- /navbar wrapper -->

<p>content content content</p>

<!-- javascript imports --> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <!-- end javascript imports --> </body> </html>

I really appreciate all help and suggestions. Thanks for taking a look! -Sean

1 Answer

Sue Dough
Sue Dough
35,800 Points
Sue Dough
Sue Dough
35,800 Points

THat doesn't look right. Try this.

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Sean Pierce</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#about">About</a></li>
            <li><a href="#skills">Skills</a></li>
            <li><a href="#experience">Experience</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>
Sean Pierce Sumler
Sean Pierce Sumler
18,968 Points
Sean Pierce Sumler
Sean Pierce Sumler
18,968 Points

Thanks. That worked brilliantly. I appreciate your help!