Bootstrap: How do I make the hamburger visible at breakpoint and hide navbar for all other screen sizes?

Question

I would like to hide the navbar for all screen sizes, except 480px and smaller screen sizes where I would like the "hamburger" to be displayed. How can I achieve this? Thank you.

Answer 1

Use the visible-xs class on your div. E.g.,

<div class="visible-xs any-other-class-you-may-have">
 ...
</div>

Answer 2

Use a media query..

.navbar {
    display: none;
}

@media (max-width: 480px) {
    .navbar {
        display: block;
    }
}

http://www.codeply.com/go/TzpIH3b0uH