Как добавить меню гамбургера в бутстрап

Мне нужна помощь с bootstrap nav. Я хочу, чтобы он был переключен с помощью значка гамбургера на мобильном телефоне.

Здесь он находится на codepen: http://codepen.io/sadman/pen/hfGwv

Код HTML:

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container">
        <ul class="nav navbar-nav">
            <li><a href="index.php">Home</a></li>
            <li><a href="about.php">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="contact.php">Contact</a></li>
        </ul>
    </div>
</nav>

Мой пользовательский CSS:

.navbar, .navbar-inverse {
    border-radius: 0;
    border: none;
    margin-bottom: 0;
    min-height: 80px;
}

.nav li {
    display: inline;
    color: white;
}

.navbar-inverse .navbar-nav > li > a {
    color: #ffffff;
    font-family: Lato;
    font-size: 1.7em;
    font-weight: 300;
    padding: 30px 25px 33px 25px;
}

.navbar-inverse .navbar-nav li a:hover {
    background-color: #444444;
    transition: 0.7s all linear;
    height: 100%;
}

Ответы

Ответ 1

Все, что вам нужно сделать, это прочитать код на getbootstrap.com:

Codepen

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <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 navbar-nav">
                <li><a href="index.php">Home</a></li>
                <li><a href="about.php">About</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="contact.php">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

Ответ 2

Чтобы создать значок, вы можете использовать глификон в Bootstrap:

<a href="#" class="btn btn-info btn-sm">
    <span class="glyphicon glyphicon-menu-hamburger"></span>
</a>

И затем управляйте размером значка в css:

.glyphicon-menu-hamburger {
  font-size: npx;
}