I am working on a website footer, and am looking for a way to make a nav that has all it's items in one row on a large screen, and collapsed to many rows on a smaller screen. The collapsing happens just fine, but I cannot figure out a way to:
a) automatically show the rows and not have them hidden until the toggle button is hit
b) eliminate the toggle button all together
My current code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-dark bg-dark navbar-expand-xl py-0" id="footerBar">
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#" target="_blank">link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link2</a>
</li>
</ul>
</div>
</nav>
Currently, this just collapses into nothing without a button (obviously because I have removed it). Is there an easy way to make it default to expanded on smaller screens?
Figured it out...
Needed the "show" class applied to the collapse (the div with id navbarColor03
).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-dark bg-dark navbar-expand-xl py-0" id="footerBar">
<div class="collapse navbar-collapse show" id="navbarColor03">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#" target="_blank">link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link2</a>
</li>
</ul>
</div>
</nav>