CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Barry Burke
Barry Burke

Reputation: 94

bootstrap - Hide Mobile Menu(navbar)

I have a website with a navbar. On mobiles or when the screen is too small, i can toggle to hide or see by clicking a button. This works grand. However , how can i get it to hide by default as it takes up most of the screen

Working with bootstrap 3.0

      <div class ="navbar navbar-inverse navbar-static-top" role ="navigation">

        <div class ="container">
          <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 ="#"> Work Experience</a>

          </div>

          <div class ="navbar-collapse collaspe">
            <ul class ="nav navbar-nav navbar-right">
              <li ><a href ="index.php">Home &#8962;</a></li>

              <li class ="active"> <a href ="#">Records &#128064;</a></li>
              <li> <a href ="logout.php">logout &#128274;</a></li>
            </ul>

          </div>

        </div>

      </div>

Thanks

Upvotes: 1

Views: 2259

Answers (1)

aleksandar
aleksandar

Reputation: 2399

You had a lot of mistakes in your code.
You cant use data-target=".navbar-collapse" to access element with class like that in html.
You should use the ID of the element.
This the correct code, rewritten from zero:

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#you-cant-use-class-like-that" aria-expanded="false">
        <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="#">Work Experience</a>
    </div>
    <div class="collapse navbar-collapse" id="you-cant-use-class-like-that">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="index.php">Home &#8962;</a>
        </li>
        <li class="active"><a href="#">Records &#128064;</a>
        </li>
        <li><a href="logout.php">logout &#128274;</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Upvotes: 1

Related Questions