CODEWITHSUNDEEP
csstwitter-bootstrap-3navbar
Richard Luppino
Richard Luppino

Reputation: 3

navbar toggle not appearing

When I resize my browser ( both IE and Chrome ) the nav disappears correctly but the toggle does not appear. I followed the code from the bootstrap website and am I not sure what I am missing. Thank you in advance. Here is my code snippet:

<nav class="navbar navbar-default navbar-static-top">
        <div class="container">
           <div class="navbar-header">
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-collapse">
                <span class="glyphicon glyphicon-menu-hamburger"></span>
                <span class="glyphicon glyphicon-menu-hamburger"></span>
                <span class="glyphicon glyphicon-menu-hamburger"></span>
               </button>
           </div>
            <div class="collapse navbar-collapse" id="menu-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

Upvotes: 0

Views: 3223

Answers (1)

Dee
Dee

Reputation: 714

Your code looks great, the only thing I would do diffently is remove the collapsed class and change the data-target property menu-collapse id to a class. I rebuilt the nav here:

[http://www.bootply.com/xcsJFk9jpA][1]
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
              <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <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="site-template.html">Site Brand</a>
              </div>

              <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="index.html">Home</a></li>
                  <li><a href="blog.html">Blog</a></li>
                  <li><a href="clients.html">Clients</a></li>
                  <li><a href=" contact.html">Contact</a></li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social <b class="caret"></b></a><!--This link dose not go anywhere it is like the intro to the dropdown list.It is used to power the drop down menu. There are going to be social links in the drop down. -->
                      <ul class="dropdown-menu">
                        <li><a href="http://facebook.com">Facebook</a></li>
                        <li><a href="http://twitter.com">Twitter</a></li>
                        <li><a href="http://plus.google.com">Google</a></li>
                        <li><a href="http://www.linkedin.com">LinkedIn</a></li>
                      </ul>
                  </li>
                </ul>
              </div>
            </nav>
<!-- End Navigation -->

Upvotes: 1

Related Questions