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

user_3586069 0
Viewed 7318

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>
twitter-bootstrap css html
2 Answers

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>

user_103664950

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>

user_103667360
Related