shalyala parveen shalyala parveen - 7 months ago 26
Javascript Question

why the nav bar collaspe isn't working?

i'm confused which code i should and which shouldn't. so i just place the site to the dropbox and posting the link here.

http://shaylakarzon.kissr.com/nav/index.html

Please check the navbar. it's responsive but doesn't work when the window is small.

i've messed up something. my navbar working fine when it's single. but it creates a problem when i'm trying to adjust it with my slider. in small device layout it shows the menus when i click the sr-only buttons but the menus don't go back if i cleck the sr-only button again.

code

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<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> <!-- container-fluid -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav" id="navbar-scroll">
<li class="active"><a href="">Home</a></li>
<li><a href="">Blog</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
<div class="navbar-right login_poopup">
<p id="login_poopup"><a>Login<span class="caret"></span> </a></p>
</div>
</div>

</nav>

Answer

linked up general jquery file link before linked bootstrap css file link like this.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">