Bootstrap 3: dropdown not working only when fixed navbar is on top position

Question

For whatever reason, when at the top of the page my fixed navbar's dropdown menu links are disabled and there is no way for me to click on them. However, as soon as I scroll and the navbar fixes to the top, they are clickable again.

Here is an example on Bootply: http://www.bootply.com/bfgbVfbK9g

It seems to work fine on Bootply, but on my server (in rails) it isn't working.

Here is the html:

<nav class="navbar navbar-default navbar-fixed-top navdoc" id="nav-doc" data-spy="affix">
<div class='container'>
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav nav-justified" align='center'>
      <li>
        <a href="#create" class='doclink' style="display:inline-block;padding-right:0px;"><img src="/images/create-icon.jpg" class='icon' >Create an Idea</a>
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="display:inline-block;padding-left:0px;"><b class="caret"></b></a>
          <ul class="dropdown-menu pull-right">
            <li><a href="#createnewidea">Create a New Idea</a></li>
            <li><a href="#directidea">Direct an Existing Idea</a></li>
            <li><a href="#defineidea">Define an Existing Idea</a></li>
            <li><a href="#measuringcont">Measuring Contributions</a></li>
            <li><a href="#transitioncreatebuild">Transition from Create to Build</a></li>
          </ul>
      </li>
      <li>
        <a href="#build" class='doclink' style="display:inline-block;padding-right:0px;"><img src="/images/build-icon.jpg" class='icon'>Build an Idea</a>
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="display:inline-block;padding-left:0px;"><b class="caret"></b></a>
          <ul class="dropdown-menu pull-right">
            <li><a href="#partsandequity">Parts and Equity</a></li>
            <li><a href="#ideadescription">Idea Description</a></li>
            <li><a href="#summaryofbusiness">Summary of Business</a></li>
            <li><a href="#summaryofproduct">Summary of Product</a></li>
            <li><a href="#marketingstrategyplan">Marketing Strategy Plan</a></li>
            <li><a href="#marketanalysis">Market Analysis</a></li>
            <li><a href="#marketingstrategyimplementation">Marketing Strategy Implementation</a></li>                
            <li><a href="#executivesummary">Executive Summary</a></li>
            <li><a href="#logo">Logo</a></li>
            <li><a href="#wireframes">Wireframes</a></li>   
            <li><a href="#mockups">Mock-Ups</a></li>    
            <li><a href="#flowchartandschema">Flowchart & Schema</a></li> 
            <li><a href="#prototype">Prototype</a></li> 
            <li><a href="#startpart">Starting a Part</a></li>    
            <li><a href="#unstartpart">Unstarting a Part</a></li>   
            <li><a href="#finishpart">Finishing a Part & Assessment of Contribution Quality</a></li> 
            <li><a href="#measuringcontrbuild">Measuring Contributions</a></li>
            <li><a href="#transitionbuildbuy">Transition from Build to Buy</a></li>         
          </ul>
      </li>
      <li> 
          <a href="#buy" class='doclink' style="display:inline-block;padding-right:0px;"><img src="/images/buy-icon.jpg" class='icon'>Buy an Idea</a>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="display:inline-block;padding-left:0px;"><b class="caret"></b></a>
          <ul class="dropdown-menu pull-right">
            <li><a href="#infoforinvestors">Information Available to Investors</a></li>
            <li><a href="#actionspossiblebuy">Actions Possible</a></li>
            <li><a href="#whathappensnext">What Happens Next?</a></li>
          </ul>
      </li>
    </ul>
  </div><!--/.nav-collapse -->

And the css:

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
  -webkit-font-smoothing: antialiased;
}

.row {
  margin-left:0px;
  margin-right:0px;
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}


/* Custom page CSS
-------------------------------------------------- */

#wrap > .container {
  padding: 60px 15px 0;
}
.container .credit {
  margin: 20px 0;
}

h1,h2,h3,h4 {
  vertical-align:middle;
}

header {
  background: #f16251;
  height:550px;
  color:#000000;
}

header h1,header h2,header h3 a,header a,header a:hover {
  color:#101010;
}

header h3 {
  background: #ffcc33;
  padding:10px;
  border-radius:3px;
  padding:12px 10px 6px 10px;
}

header .dropdown-menu {
  top:74px;
  background: #ffcc33;
  border-width:0;
}

#nav-doc {
  width: 100%;
  position:static;
  top:-32px;
  background-color: #fff;
  opacity:0.95;
  box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}

#nav-doc.affix {
   position: fixed;
   top: 0;
   z-index:10000;
}

#footer > .container {

}

@media (min-width: 767px) {
  .navbar-nav.nav-justified > li{
      float:none;
  }
}
.navbar-nav {
  margin: 1px 1px; 
}  

.navbar-collapse.in { /*3.0.2 bug workaround*/
    overflow-y: visible;
}

.navbar-toggle {
  outline:0;
}

.divider {
  height:100px;
}

.panel {
  border-width:0;
}

.scroll-top {
   position:fixed;
   bottom:0;
   right:6%;
   z-index:100;
   background: #bdc3c7;
   color: #333333;
   font-size:24px;
   border-top-left-radius:3px;
   border-top-right-radius:3px;
}
.scroll-top a:link,.scroll-top a:visited {
  color:#222;
} 


section {
  color: #ffffff;
  min-height: 400px;
  height: auto !important;
  height: 100%;
  padding-top:100px;
}

.doc {
  text-align: justify;
  text-justify: inter-word;
}


.nav .caret {
  border-top-color: #333333;
  border-bottom-color: #333333;
}

.nav a:hover .caret {
  border-top-color: #333333;
  border-bottom-color: #333333;
}

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus .doclink {
  background-color:transparent;
}

.anchor {
  display: block; 
  position: relative; 
  top: -100px; 
  visibility: hidden;
}

and the Javascript:

$(document).ready(function($) {
    $('#nav-doc').affix({
        offset: {
            top: 50
        }
    });
})

I really can't for the life of me figure out what's wrong. I have the required files in my application.js in the right order as well.

Thanks for your help.

Edit: Here is an image of what is happening on my screen:

enter link description here

Anyone know why this is happening? When I added http://postimg.org/image/rxp2ezbuj/ as was suggested in an answer to my other anchor tag, it just stopped that from becoming a usable link.

Answer 1

You need to add data-toggle="dropdown" to the text link as well.

<li class="">
  <a href="#" class="doclink" data-toggle="dropdown" style="display:inline-block;padding-right:0px;"><img src="/images/create-icon.jpg" class="icon">Create an Idea</a>
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="display:inline-block;padding-left:0px;"><b class="caret"></b></a>
  <ul class="dropdown-menu pull-right">
    <li><a href="#createnewidea">Create a New Idea</a></li>
    <!-- the rest of your list items -->
  </ul>
</li>