Help! Bootstrap Nav

1

hi everyone, I’m Amaya. I’m trying to code a Bootstrap navbar, but when I click the dropdown menu (only visible in xs size), none of my menu items show up. Basically, when I click the button nothing happens. I’ve checked my code in a validator and checked that the data-target for my button is the id “collapsable-nav”. Any ideas? Here’s my relevant HTML:

<header>
	<nav id="header-nav" class="navbar navbar-default">
		<div class="container">
			<div class="navbar-header">
				<div class="navbar-brand">
					<h1>Food LLC</h1>
				</div>
				<button type="button" class="navbar-toggle collapsed visible-xs" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
            		<span class="sr-only">Toggle navigation</span>
            		<span class="icon-bar"></span>
            		<span class="icon-bar"></span>
            		<span class="icon-bar"></span>
          		</button>
			</div>
			<div id="collapsable-nav" class="collapse navbar-collapse">
          		<ul id="nav-list" class="nav navbar-nav navbar-right">
          			<li>
          				<a href="#">Nori</a>
          			</li>
          			<li>
          				<a href="#">Beet</a>
          			</li>
       				<li>
          				<a href="#">Turnip</a>
          			</li>
          		</ul>
          	</div>
        </div>
	</nav>
</header>
2

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

3

thank you! just figured that out. any ideas on the navbar?

4

Have you included jQuery and bootstrap.js?

5

yes, at the bottom of my html I have:

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" scr="js/bootstrap.min.js"></script>
6

Maybe because of this typo?

<script type="text/javascript" scr="js/bootstrap.min.js"></script>
                               ^ should be spelled `src`
1 Like
7

thank you so much! that worked.