title: Bootstrap 3 navbar dropdown menu not toggling on a page with affix.js element
body: <p>My navbar has a dropdown menu in it that will not toggle when a user navigates to a page with the affix.js functionality on it. I'm building this in Visual Studio 2012, so its a master/content page setup. On any other page, the navbar works fine, so I assume it has to do with affix.js because it is the only differing element.</p>
  
  <p>Master navbar:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default" id="navbar" role="navigation"&gt;
              &lt;div class="container"&gt;
                  &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"&gt;
                          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;a class="navbar-brand" href="Home.aspx"&gt;
                          &lt;img src="../Images/#######.png" class="img-responsive" alt="Bauen Group logo"/&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
                  &lt;div class="collapse navbar-collapse" id="navbar-collapse-1"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li&gt;&lt;a href="Home.aspx"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Products &amp; Services &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Consulting&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="Filler.aspx"&gt;Filler&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="Documentation.aspx"&gt;Product Documentation&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Company &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="AboutUs.aspx"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Careers&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="Contact.aspx"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="Customer.aspx"&gt;Customer Portal&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;                        
                  &lt;/div&gt;
                  &lt;!-- /.navbar-collapse --&gt;
              &lt;/div&gt;
              &lt;!-- /.container-fluid --&gt;
          &lt;/nav&gt;
  </code></pre>
  
  <p>On the content page, I added an extra reference to my jquery and bootstrap .js files in the header because I was getting an exception that jquery was not defined. The .js files are also referenced at the bottom of the master page.</p>
  
  <p>Content page:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('#sidebar').affix({
              offset: {
                  top: 245
              }
          });
  
          var $body = $(document.body);
          var navHeight = $('.navbar').outerHeight(true) + 10;
  
          $body.scrollspy({
              target: '#leftCol',
              offset: navHeight
          });
      });
  &lt;/script&gt;
  &lt;div class="container" id="top"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-3" id="leftCol"&gt;
              &lt;ul class="nav nav-stacked" id="sidebar"&gt;
                  //&lt;li&gt;&lt;a&gt;side bar content&lt;/a&gt;&lt;/li&gt;                    
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-9"&gt;
              //content
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Not too sure whats going on. I wonder if anyone else has had this problem. Any help would be appreciated.</p>