Как сделать hamburger menu?

Question

[Seag]

Здравствуйте, есть сверстанное меню
https://codepen.io/anon/pen/qwqELe#anon-login
Как при мобильном расширении сделать hamburger?
Как то не получается...

Comments

[Даниил Маслов]

как вы уже попробовали это реализовать?

[Seag]

s0xzwasd,

<div class="menu-main navbar navbar-light">
        <button class="navbar-toggler hidden-sm-up" 
                type="button" 
                data-toggle="collapse" 
                data-target="#navbarResponsive" 
                aria-controls="navbarResponsive" 
                aria-expanded="false" 
                aria-label="Toggle navigation"></button>
      <div class="collapse navbar-toggleable-xs" id="navbarResponsive"></div>
      <ul class="nav navbar-nav">
        <li class="nav-item"><a class="nav-link" href="">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="" class="current">Products</a></li>
        <li class="nav-item"><a class="nav-link" href="">Contacts</a></li>
        <li class="nav-item"><a class="nav-link" href="">User Guide & FAQS</a></li>
      </ul>
    </div>

так пробовал

[dicem]

Совершенно не понятно, что вы имеете ввиду, скажите вы знакомы с media в CSS?
Вам нужно адаптивное меню?

[Seag]

dicem, да, знаком. Верно, нужно адаптивное меню, чтобы на мобильной версии выглядело

Answer 1

[Andrej Sharapov]

1. создаете меню и бургер в html
2. при разрешении, например, больше 768px скрываете бургер, стилизуете меню
3. при разрешении меньше 768 бургер появляется, меню скрывается и стилизуется
4. добавляете скрипт щелчка по бургеру или через css чекбокс
5. готово
6. удачи