CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
bluedimensional
bluedimensional

Reputation: 412

How to have the Bootstrap's collapsible navbar open by default?

I have a Bootstrap navbar with the toggle button. How do I get this navbar to be open by default when it is on collapsed mode or on page load? I've tried setting data-toggle="collapse" attribute to data-toggle="collapse.show" and now it shows by default but requires two clicks to close. How can I get it open by default and work as expected?

The navbar code is like this:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    /* content */
  </div>
</nav>

Upvotes: 6

Views: 10733

Answers (2)

Shidersz
Shidersz

Reputation: 17190

If you want the navbar to be open by default when it is on the collapsed mode, then you have to add the show class to the item that holds the collapsible menu (the one holding the collapse class), like this:

<div class="collapse show navbar-collapse" id="navbarSupportedContent">
    /* content */
</div>

Reference: Bootstrap Collapse Documentation

Here you have an example, so you can see it working...

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">
    BRAND
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse show navbar-collapse" id="navbarNav">
     <ul class="navbar-nav">
       <li class="nav-item">
         <a class="nav-link" href="#">Link 1</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#">Link 2</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#">Link 3</a>
       </li>
     </ul>
  </div>
</nav>

Upvotes: 7

manu paul
manu paul

Reputation: 35

Try this:

$(document).ready(function() {
  $("#navbar").click();
});
<button id="navbar" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

Upvotes: 0

Related Questions