I am using Twitter Bootstrap. It works very well, and navbar works well. It reacts and adjusts accordingly, but when you shorten the screen on the desktop or when you lift the site onto a mobile phone, it begins to expand, already occupying a bunch of the screen. I want it to start folding up with expandability.
Code below:
<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="/">My Site</a> <div class="nav-collapse collapse"> <ul class="nav"> <li <% if @league=='recruiting' %>class="active"<% end %>><%= link_to "Recruiting", :controller => "league", :action=>"index", :league=>"recruiting" %></li> <li <% if @league=='college' %>class="active"<% end %>><%= link_to "College", :controller => "league", :action=>"index", :league=>"college" %></li> <li <% if @league=='nfl' %>class="active"<% end %>><%= link_to "NFL", :controller => "league", :action=>"index", :league=>"nfl" %></li> </ul> <ul class="nav pull-right"> <li><a href="/blog">Blog</a></li> <li <% if params[:controller]=='chart' %> class="active"<% end %>><a href="/data/all/hundred">Data</a></li> <% if user_signed_in? %> <li><%= link_to "My Profile", user_profile_path(:username => current_user.username) %></li><li><%= link_to('Logout', destroy_user_session_path, :method => :delete) %></li> <% else %> <li><%= link_to "Login", "#login-lightbox", 'data-toggle'=>"modal", 'id'=>'login-link' %></li> <% end %> </ul> </div> </div> </div> </div>
source share