Как сделать гамбургер-меню в Bootstrap3?

@DennisM · Регистрация: 31.05.2015

Author24 — интернет-сервис помощи студентам

Друзья, здравствуйте!
Подскажите, пожалуйста, как сделать в Bootstrap3 гамбургер-меню при уменьшении размера экрана до размера смартфона.

Спасибо, большое!

@cyb0rg_01 · 21.09.2015, 23:20

http://codepen.io/macsupport/pen/bKFzD

HTML5

<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>
        </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%;
}

Комментарий модератора

код нужно размещать в сообщение

@DennisM · 22.09.2015, 13:12 **[ТС]**

Помогите, пожалуйста... я сделал гамбургер-меню, но вылезли две проблемы.

Ссылка на вид до создания гамбургера - del
Ссылка на вид после создания гамбургера - del

Т.е. гамбургер сделал вроде норм, получилось, но вылезли два дефекта:
- разрыв между меню и контентом
- поплыла вверх активная ссылка

Со поплывшей ссылкой вообще не могу понять, что происходит.
А разрыв пытался убрать установив для блоков меню и контента margin-bottom и margin-top соответственно в 0px... не помогло

что это может быть?

спасибо большое!

Комментарий модератора

1 ссылки некорректны
2 изображения нужно загружать на форум

@DennisM · 22.09.2015, 16:45 **[ТС]**

ок... загрузил изображения... HELP!!!

@cyb0rg_01 · 22.09.2015, 16:48

DennisM, нужно уметь очень хорошо ванговать, чтобы понять в чем причина

@DennisM 0 / 0 / 0 Регистрация: 31.05.2015 Сообщений: 35
		1
	Как сделать гамбургер-меню в Bootstrap3? 21.09.2015, 21:45. Показов 5989. Ответов 4 Метки нет (Все метки) Друзья, здравствуйте! Подскажите, пожалуйста, как сделать в Bootstrap3 гамбургер-меню при уменьшении размера экрана до размера смартфона. Спасибо, большое! 0

@DennisM 0 / 0 / 0 Регистрация: 31.05.2015 Сообщений: 35
	22.09.2015, 16:45 [ТС]	4
	ок... загрузил изображения... HELP!!! Миниатюры 0

@cyb0rg_01 Фрилансер 735 / 352 / 96 Регистрация: 05.05.2014 Сообщений: 2,621
	22.09.2015, 16:48	5
	DennisM, нужно уметь очень хорошо ванговать, чтобы понять в чем причина 0