Geek Answers Handbook

Bootstrap 3: Can the nav-pills navigation menu collapse like navbar?

I understand that Bootstrap 3 comes with a navigation bar that crashes when viewed on smaller screens. However, I do not like the look of the navigator and decided to customize my main navigation menu using the class nav-pills. Is it possible to minimize my navigation menu when viewing it on a telephone device? Here is my navigation code:

<nav>
    <ul class="nav nav-pills">
        <li><a href="#"><strong>HOME</strong></a></li>
        <li class="active"><a href="#"><strong>CAPABILITIES</strong></a></li>
        <li><a href="#"><strong>Careers</strong></a></li>
        <li><a href="#"><strong>Contracts</strong></a></li>
        <li><a href="#"><strong>About Us</strong></a></li>
        <li><a href="#"><strong>News</strong></a></li>
        <li><a href="#"><strong>Contact us</strong></a></li>
    </ul>
</nav>
+4
source share
3 answers

Here's a video on Youtube that shows how to do it: Bootstrap 3.1 Tutorial 1 - Adaptive Masks by Default!

, , 2 , . xs, nav- xs.

+2
<nav>
    <ul class="nav nav-pills visible-sm visible-xs">
        <li><a href="#"><strong>HOME</strong></a></li>
        <li class="active"><a href="#"><strong>CAPABILITIES</strong></a></li>
        <li><a href="#"><strong>Careers</strong></a></li>
        <li><a href="#"><strong>Contracts</strong></a></li>
        <li><a href="#"><strong>About Us</strong></a></li>
        <li><a href="#"><strong>News</strong></a></li>
        <li><a href="#"><strong>Contact us</strong></a></li>
    </ul>
</nav>
+3

Nevermind, I just hid this menu when the screen is for the phone, and then, using the drop-down menu, appears instead.

+2
source

More articles:


All Articles