Bootstrap always open responsive navbar

Question

I want that when someone opens it then menu must be opened, no need to click the button for opening it. When someone clicks the button then closes it instead of opening it.

Can anyone please help me? How can I achieve the result?

<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
  <div class="container">
    <div class="yamm navbar navbar-default" role="navigation">
      <div class="navbar-header">
        <button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width:  100%;">
          <span class="sr-only">Toggle navigation</span> 
          <span style="font-size: 22px;color: #fff;text-align:  center;width:  100%;">Menu</span> 
        </button>
      </div>
      <div class="nav-bg-class">
        <div class="navbar-collapse collapse" id="mc-horizontal-menu-collapse" style="height: 0px;">
          <div class="nav-outer">
            <ul class="nav navbar-nav">
              <li class="active dropdown yamm-fw"> <a href="http://vsss.co.in/index.php/Home" data-hover="dropdown" class="dropdown-toggle disabled" data-toggle="dropdown">Home</a> </li>
              <li class="dropdown mega-menu">
                <a href="#" data-hover="dropdown" class="dropdown-toggle" data-toggle="dropdown">Category</a>
                <ul class="dropdown-menu container">
                  <li>
                    <div class="yamm-content">
                      <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-3 col-menu">
                          <ul class="links">
                            <li><a href="http://vsss.co.in/index.php/Category/view/24" class="nav_item">Premium pens</a></li>
                            <li><a href="http://vsss.co.in/index.php/Category/view/22" class="nav_item">Pens &amp; refills</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Yes by putting show class with collapse it will work for you see in example code:

<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
  <div class="container">
    <div class="yamm navbar navbar-default" role="navigation">
      <div class="navbar-header">
        <button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width:  100%;">
          <span class="sr-only">Toggle navigation</span> 
          <span style="font-size: 22px;color: #fff;text-align:  center;width:  100%;">Menu</span> 
        </button>
      </div>
      <div class="nav-bg-class">
        <div class="navbar-collapse collapse show" id="mc-horizontal-menu-collapse" style="height: 0px;">
          <div class="nav-outer">
            <ul class="nav navbar-nav">
              <li class="active dropdown yamm-fw"> <a href="http://vsss.co.in/index.php/Home" data-hover="dropdown" class="dropdown-toggle disabled" data-toggle="dropdown">Home</a> </li>
              <li class="dropdown mega-menu">
                <a href="#" data-hover="dropdown" class="dropdown-toggle" data-toggle="dropdown">Category</a>
                <ul class="dropdown-menu container">
                  <li>
                    <div class="yamm-content">
                      <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-3 col-menu">
                          <ul class="links">
                            <li><a href="http://vsss.co.in/index.php/Category/view/24" class="nav_item">Premium pens</a></li>
                            <li><a href="http://vsss.co.in/index.php/Category/view/22" class="nav_item">Pens &amp; refills</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>