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

  • Your ` – Blazemonger Oct 02 '13 at 13:48
  • No that was something caught wrong while pasting from my editor. –  Oct 02 '13 at 13:51
  • This sounds like a javascript error, is anything showing up on the console? – David Nguyen Oct 02 '13 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 –  Oct 02 '13 at 14:14

1 Answers1

0

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

$('body').scrollspy({ target: '#id-goes-here' })
Blazemonger
  • 90,923
  • 26
  • 142
  • 180
SethCodes
  • 283
  • 1
  • 5
  • 14
  • So ur suggesting that the scrollspy js im using conflicts with the navbar toggle function? –  Oct 02 '13 at 13:51
  • 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. – SethCodes Oct 02 '13 at 13:59
  • 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 –  Oct 02 '13 at 14:02
  • http://getbootstrap.com/customize/ - Will be your best option. Are you using bootstrap 3? – SethCodes Oct 02 '13 at 14:08
  • 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 –  Oct 02 '13 at 14:09
  • So ur suggesting i download bootstrap UNCHECKING the scrollspy from customize section and retry? –  Oct 02 '13 at 14:12
  • http://stackoverflow.com/questions/8711333/bootstrap-js-scrollspy-with-animated-scroll Visit this post. It will provide you with what you're looking for and minimise your load time. – SethCodes Oct 02 '13 at 14:14