CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
user3277633
user3277633

Reputation: 1923

bootstrap nav not collapsing on small screens

Not sure if I am even doing this right

#navigation.navbar.navbar-default.navbar-fixed-top
.container
    .navbar-header
        %button.navbar-toggle.collapsed{"aria-expanded" => "false", "data-target" => "#navbar-1", "data-toggle" => "collapse", :type => "button"}
            %span.sr-only Toggle
            %span.icon-bar
            %span.icon-bar
            %span.icon-bar
        %b= link_to "TITLE", root_path, class: 'navbar-brand'
    #full-screen-nav
        .navbar-collapse.collapse#navbar-1
            %ul.nav.navbar-nav
                %li Item 1...

Right now when the screen size width is less than 640, all items (item1, item2,...) simply disappear, leaving only TITLE in the navbar.

I thought navbar-collapse.collapse is suppose to collapse those item into some sort of drop down? or did I misunderstood what this class is suppose to do?

How can I fix it so that the items will reappear on smaller screens?

Upvotes: 0

Views: 703

Answers (1)

Miguel Ike
Miguel Ike

Reputation: 484

I think you missing the button.navbar-toggle.collapsed on your .navbar-header

This button will show/hide your menu.

Check the example bootrap made for navbar here

Your code should look something like this jsfiddle

Upvotes: 2

Related Questions