75590

Collapse button in Twitter bootstrap navbar not clickable

Question:

When my navbar collapses the links and dropdown hide correctly and the button to display them shows but is not clickable. If I replace my navbar with the code on the bootstrap page then the bootstrap example bar and collapse button performs correctly, so it is a problem with my HTML somewhere..

My code is:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class= "navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-link nav brand"> <a href="/">MarcB</a> </div> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><%= link_to "Blog", posts_path %></li> <li><%= link_to 'Contact', contact_path %> </li> </ul> <ul class="nav navbar-nav navbar-right"> <% if current_user %> <li> <%= link_to "Sign Out", logout_path %> </li> <p class="navbar-text navbar-right signed-in"> Signed in as: <%= current_user.name %>

<% else %> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Log in <b class="caret"></b></a> <ul class="dropdown-menu" role="menu"> <li><%= link_to 'Log in with Facebook', "/auth/facebook" %></li> <li><%= link_to 'Log in with LinkedIn', "/auth/linkedin" %></li> <li><%= link_to 'Log in with GitHub', "/auth/github" %></li> <li><%= link_to 'Log in with Google+', "/auth/gplus" %></li> </ul> </li> <% end %> </ul> </div> </div>

and the generated HTML from rails is (not signed in)

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class= "navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-link nav brand"> <a href="/">MarcB</a> </div> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="/posts">Blog</a></li> <li><a href="/contact">Contact</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Log in <b class="caret"></b></a> <ul class="dropdown-menu" role="menu"> <li><a href="/auth/facebook">Log in with Facebook</a></li> <li><a href="/auth/linkedin">Log in with LinkedIn</a></li> <li><a href="/auth/github">Log in with GitHub</a></li> <li><a href="/auth/gplus">Log in with Google+</a></li> </ul> </li> </ul> </div> </div>

I have also tried commenting out the second ul with the dropdown - produces the same unclickable button.

Answer1:

Put high z-index on button e.g.

button { position: relative; z-index: 100000; }

Recommend

  • Bootstrap grid won't work using xs columns
  • Fluid sticky footer using CSS
  • Where to get free math libraries for C/C++
  • bootstrap grid not working as expected [duplicate]
  • How to set the navigation bar to the top in Table View?
  • Base Internationalization and “Could not find a storyboard named […]”
  • Yii2 Login with database
  • jQueryMobile, Ajax Navigation, and MVC
  • Reading space separated values file in c++ error
  • Action Pack components in Rails
  • C#: Import/Export Settings into/from a File
  • Syntax error on tokens, AnnotationName expected instead - error on query
  • JSR-330 support in Picocontainer : @Inject … @Named(\"xxx)
  • How can I display the parent menu item's description using Wordpress walkers?
  • Button click event not firing in jQuery
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • $wpdb not working in file of WordPress plugin
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • FileReader+canvas image loading problem
  • Paperclip, set path outside of rails root folder
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • RectangularRangeIndicator format like triangular using dojo
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Spray.io: When (not) to use non-blocking route handling?
  • Can Jackson SerializationFeature be overridden per field or class?
  • Modifying destination and filename of gulp-svg-sprite
  • GridView Sorting works once only
  • Cannot Parse HTML Data Using Android / JSOUP
  • Android Studio and gradle
  • InvalidAuthenticityToken between subdomains when logging in with Rails app
  • Java static initializers and reflection
  • unknown Exception android
  • EntityFramework adding new object to nested object collection
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?