Navbar Bootstrap 4 Collapse now automatic

Asked

Viewed 3,653 times

0

I am copying EXACTLY any navbar template I found in the new bootstrap 4 documentation I am using in my projects.

Only, it already comes "collapsado" let’s say so.

Is there any javascript function that I can put so that it does not "collaspse" automatically.

Follow the menu I copied from bootstrap 4: https://jsfiddle.net/7pq9zoaL/

That’s the layout I’m making: https://jsfiddle.net/yxwzwq7e/ (a simple Dashboard)

javascript html css bootstrap
  • 1

    Rafael, will you edit the question with the example code? you can use Bootstrap CND(https://v4-alpha.getbootstrap.com/getting-started/download/#bootstrap-Cdn) for fiddle.

  • I updated, thank you!

1 answer

1


Simple, in the div <div class="collapse navbar-collapse" id="nav-content"> is the class collapse that just "collides" your Nav. Just remove, getting so <div class="navbar-collapse" id="nav-content">, following example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-sm navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
			</button>
  <a class="navbar-brand" href="#">Logo</a>
  <div class="navbar-collapse" id="nav-content">
    <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>

Or you can keep the class collapse and perform the function toggle() Jquery after loading your page with the following Jquery code $("#nav-content").toggle();, following example:

$("#nav-content").toggle();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-sm navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
			</button>
  <a class="navbar-brand" href="#">Logo</a>
  <div class="navbar-collapse collapse" id="nav-content">
    <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>

Browser other questions tagged javascript html css bootstrap

You are not signed in. Login or sign up in order to post.