navbarnavtwitter-bootstrap-4twitter-bootstrap-4-beta

Bootstrap 4 to have navbar items allways expanded on small screen with no button


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?


Solution

  • 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>