Make bootstrap navbar mobile, at a different width than default

Question

I am having some bootstrap 3.1.1 problem. I have a navbar with a good amount if list items on it. It works perfectly but when the screen gets smaller, it reaches a point where all my <ul> breaks into the next line, like this:

What I want to do to fix it, is that it shows the button that toggles the navbar when bootstrap detects a small screen width. I am so bad at media queries and despite the fact that this is probably 4 lines of css code, I can't figure it out. Basically, instead of having to reach the 745px mark, it will turn into mobile at 900px for example.

If it helps, here is a codepen of the navbar: http://codepen.io/anon/pen/oncgh

Thank you in advance so much for the help!

Answer 1

A simple approach would be to adjust styles based on screen size. Here is the sample for the bootstrap docs.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

For example, this will adjust the font size, but only when the screen is sized to the small device dimensions:

@media (min-width: @screen-sm-min) {
  .navbar-default .navbar-nav > li a {
    font-size: 10px;
  }
}

Feel free to reference the documentation directly: http://getbootstrap.com/css/#grid-media-queries