NavBar adjustment for phones Rails and Bootstrap - html

Question

I was wondering how I could collapse the content of my navbar on a mobile devise so it could have a home link and then the three dashes that when clicked drop down and show all the other links. Here is my _navigation.html.erb file:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav nav-pills">
<li><%= link_to "Home", root_path %></li></a>
<li><%= link_to "About Me", about_path, target: :_blank %></li>
<li class="dropdown">
Music<span class="caret"></span>
<ul class="dropdown-menu">
<li><a target="_blank" href="https://soundcloud.com/officialyungdremusic">Soundcloud</a></li>
</ul>
</li>
<li class="dropdown">
Social Media<span class="caret"></span>
<ul class="dropdown-menu">
<li><a target="_blank" href="https://www.youtube.com/user/OfficialYungDreMusic">Youtube</a></li>
<li><a target="_blank" href="https://twitter.com/yungdremusic">Twitter</a></li>
</ul>
<li><%= link_to "Pictures", pictures_path, target: :_blank %></li>
<li><%= link_to "Contact Me", contact_path, target: :_blank%></li>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-->
</nav>
What I'm trying to accomplish works when I resize my desktop window. But for some reason on a phone(720x1280 pixels) it doesn't resize. I am familiar with media queries in css, would I just need another media query that would be just for screens of 720 and bigger?
Any help is greatly appreciated!

Answer 1

Default breakpoint for bootstrap navbar is 768px. I tried to reproduce your example and it does collapse below 768px. However, there are tablets with screen size of 768px or more where it won't collapse. You have to either write your own media query or change the default value of #grid-float-breakpoint bootstrap variable.
Check Changing the collapsed mobile navbar breakpoint on bootstrap guide for further information.