0

Here is my navbar code 

 <div class="navbar navbar-fixed-top "> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="icon-bar" style="background-color:red;"></span> <span class="icon-bar" style="background-color:red;"></span> <span class="icon-bar" style="background-color:red;"></span> </button> <a href="#"class="navbar-brand"><img src='img/logo2.png' class="img-responsive"></a> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav navbar-right spy"> <li ><a class="fade" href="#section-1">HOME</a></li> <li ><a class="fade" href="#section-2">SHOWREEL</a></li> <li ><a class="fade" href="#section-3">FILMS</a></li> <li ><a class="fade" href="#section-4">PROFILE</a></li> <li ><a class="fade" href="#section-5">CONTACT</a></li> </ul> </div> </div> </div>

Let my clarify that spy is the class name i use for my scrollSpy js script. Here are the .js files i include at the end of the body:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/bootstrap.js" type="text/javascript"></script> <script src="js/jquery.scrollTo.js" type="text/javascript">/script> <script src="js/jquery.nav.js" type="text/javascript"></script>

Here are the .css files i include:

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/font.css" />

As said in the title,when in small media devices the toggle button works only the first time,after that it doesnt respond

Improve this question
4
  • Your <script> tags have an invalid closing tag on the third line. Could that be the source of your problem? Commented Oct 2, 2013 at 13:48
  • No that was something caught wrong while pasting from my editor. Commented Oct 2, 2013 at 13:51
  • This sounds like a javascript error, is anything showing up on the console? Commented Oct 2, 2013 at 14:11
  • No nothing,the thing is ive inserted into my code the exact navbar code from bootstrap.com and it still toggles only once. Cant seem to figure it out Commented Oct 2, 2013 at 14:14

1 Answer 1

Reset to default
0

Visit getbootstrap.com. Bootstrap 3 has scrollspy built in. You should call the scrollspy via javascript: 

$('body').scrollspy({ target: '#id-goes-here' })
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

So ur suggesting that the scrollspy js im using conflicts with the navbar toggle function?
Yes, this could cause conflict. Also it sounds like bootstrap maybe Hides and destroys the element. I would reinstall bootstrap minus scrollspy if you wish to use yours in favor.
Could you elaborate on "reinstall bootstrap minus scrollspy" a bit more as i cant understand how to fix this while keeping my current scrollspy script
getbootstrap.com/customize - Will be your best option. Are you using bootstrap 3?
Yes,moreover it seems like bootstrap scrollspy doesnt have the slide effect i desire,it just moves rapidly to its target ,i want the slide - slow effect
|