CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrap-3
displayer
displayer

Reputation: 73

Bootstrap 3: collapse button not shown on small screens

I'm trying to build a navbar which uses the collapse feature of Bootstrap in small screens. Here is the code of my navbar:

%nav{:class => "navbar navbar-default", :id => "nav_inicio", :role =>"navigation"}
  .container-fluid
    /Brand and toggle get grouped for better mobile display
    .col-lg-2.col-xs-1
    .col-lg-2.navbar-header
      %button{:class => "navbar-toggle", "data-toggle" => "collapse", "data-target" => "#navbar-collapse"}
        %span.sr-only
          Toggle navigation
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar

    /Collect the nav links, forms, and other content for toggling
    .collapse.navbar-collapse.navbar-right#navbar-collapse
      %ul.nav.navbar-nav
        - if usuario_signed_in?
          %li.text-center
            = link_to :controller => "/ldi", :action => "new" do
              Recomendar lugar
          %li.text-center
            = link_to "#" do
              Mis lugares recomendados
          %li.text-center
            = link_to "#" do
              Mis lugares valorados
          %li.text-center
            = link_to "#" do
              Mis comentarios
          %li.divider.nav-divider
          %li.active.text-center
            = link_to :edit_usuario_registration do
              = current_usuario.nombre.upcase
          %li.text-center
            = link_to :destroy_usuario_session, :method => 'DELETE' do
              Salir
        - else
          %li.active.text-center
            = link_to :new_usuario_session do
              Entrar
          %li.text-center
            = link_to :new_usuario_registration do
              Registrar

It's working properly (the collapse button is shown instead of the navbar navs) when I shrink the Chrome window on my laptop, but the button is neither shown on my mobile browser nor the emulating tool of Chrome.

How could it be fixed?

Upvotes: 0

Views: 1050

Answers (2)

cvrebert
cvrebert

Reputation: 9259

You're missing

<meta name="viewport" content="width=device-width, initial-scale=1">

in your <head>, which affects how the viewport width is determined, thus affecting the navbar's @media queries.

More info:

Upvotes: 1

acacia
acacia

Reputation: 1387

You may need something like this under your navigation;

<div class="navbar-header">
         <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
    </button><!--//nav-toggle-->
 </div><!--//navbar-header-->

Pay close attention to the content between <button> </button> tags because that is how it is created in the small screen views.

Upvotes: 0

Related Questions