Bootstrap responsive navbar not toggling

Question

I'm using twitter bootstrap for a rails project, and the responsive navbar isn't working quite right. Upon shrinking the screen size, the navbar displays the menu toggle button with the navbar options stuck open below it, and then after further shrinking finally hides the navbar options as it should. However, in either case, clicking the navbar menu toggle button does nothing. I've checked to ensure jQuery is loaded (it is), and that I'm using the newest version of Bootstrap. Here's my code:

.navbar.navbar-inverse.navbar-fixed-top{ role: 'navigation', style: 'background-color:#000066' }
    .container
        .navbar-header
            %button.navbar-toggle.pull-right{ type: 'button', data: { toggle: "collapse", target: ".navbar-ex1-collapse" } }
                %span.sr-only Toggle Navigation
                %span.icon-bar
                %span.icon-bar
                %span.icon-bar
            %a.navbar-brand{ href: root_path }
                %strong
                    L
                    %i.fa.fa-cog{ style: 'font-size:80%;margin:0 -2px;' }
                    gSMART
        .collapse.navbar-collapse.navbar-ex1-collapse{ role: 'navigation' }
            %ul.nav.navbar-nav.navbar-right
                %li
                    %a{ href: root_path, class: set_css_if( path: root_path ) }
                        HOME
                %li
                    %a{ href: about_path, class: set_css_if( path: about_path ) }
                        ABOUT
                %li
                    %a{ href: faq_path, class: set_css_if( path: faq_path ) }
                        FAQs
                %li
                    %a{ href: resources_path, class: set_css_if( path: resources_path ) }
                        MANUALS and RESOURCES
                -if current_user
                    %li
                        %a{ href: logout_path, class: set_css_if( path: logout_path ) }
                            LOGOUT
                -else 
                    %li
                        %a{ href: login_path, class: set_css_if( path: login_path ) }
                            LOGIN

For further clarification, here is my layout page, application.js and application.css.

Layout:

%html{ lang: :en }
  %head
    %title
      CogSMART
    %meta{ name: "viewport", content: "width=device-width, initial-scale=1.0" }

    = stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic'
    = stylesheet_link_tag "//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
    = stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true

    = javascript_include_tag "application", "data-turbolinks-track" => true

    = csrf_meta_tags

  %body.pull_top
    = render 'partials/navbar'
    #coming_soon
      .head
        .container
          .span12.text
            %h4
              CogSMART stands for:
            %h4
              Cognitive Symptom Management and Rehabilitation Therapy

app.js

//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree ./clean_canvas

app.css

/*
 *= require_tree ./clean_canvas_v2
 *= require_self
 */

Answer 1

Ok I have narrowed some of the issues to hopefully get you on the right path. First off I noticed that your menu has this CSS which seems to be causing a lot of problems.

.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}

I would remove all of this. Are you trying to pass display: hide/block when the button is selected like the OOTB Bootstrap does?

You will then want to add this property to your CSS:

.navbar .navbar-collapse.in {
    display: block;
}

And you should take the !important off of this class so it looks like this instead.

.collapse.in {
    display: block;
}

So when you load your page the menu should be gone and when you push your button menu button it should load the menu correctly. One thing I did notice is your menu does not remove the .in class when clicked for the second time. Hope that helps.

Answer 2

I believe the responsive errors you're experiencing are due to CSS not being loaded before JS;

here are some errors I encountered

 @media (min-width: 768px)
 .navbar-collapse.collapse
 {display: block !important;}

this is why your menu isn't collapsing

Generally you should be able to toogle this class in .in

Answer 3

The problem code is in css the you loading before bootstrap: about.css, background.css and etc. One of this classes don't allow menu open. - since the css is minified, I don't know in which of the problem lies, but I guess it's in bootstrap-overrides.css. The wrong css is the following: if you'll remove it navbar should start working:

@media (max-width: 991px) {
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none
    }

    .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 5px 15px 5px 25px
    }

    .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus {
        background-image: none
    }
}

@media (min-width: 992px) {
    .navbar .collapse {
        display: block !important
    }
}

@media (max-width: 991px) {
    .navbar .navbar-header {
        float: none
    }

    .navbar .navbar-toggle {
        display: block
    }

    .navbar .collapse {
        display: none !important
    }

    .navbar .navbar-collapse {
        max-height: 340px;
        overflow-x: visible;
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        -webkit-overflow-scrolling: touch
    }

    .navbar .navbar-collapse.in {
        overflow-y: auto
    }

    .navbar ul.navbar-nav {
        padding: 0px 20px
    }

    .navbar ul.navbar-nav.navbar-right {
        float: left !important
    }

    .navbar ul.navbar-nav > li {
        float: none
    }

    .navbar ul.navbar-nav .open .dropdown-menu > li > a {
        color: #999;
        line-height: 25px;
        font-weight: bold;
        padding: 5px 15px 5px 35px;
        font-size: 15px
    }

    .navbar ul.navbar-nav .open .dropdown-menu > li > a:hover {
        color: #fff;
        background: none
    }
}

Also you have problem in js files.

Answer 4

I don't know what ruby is but talking about bootstrap, I see you missed

data-toggle which must be written in one phrase with hypen, like this:

data-toggle="collapse"

or, it maybe:

{ type: 'button', class:"navbar-toggle", 
data-toggle: "collapse", data-target: "navbar-ex1-collapse" }