Бургер панели иконок не работает и отображает только одну горизонтальную линию - PullRequest
Новая
       5

Бургер панели иконок не работает и отображает только одну горизонтальную линию

0 голосов
/ 25 августа 2018

Я пытаюсь создать адаптивную кнопку макета, которая выглядит следующим образом:

enter image description here

Но проблема в том, что я не могусоздать три горизонтальные линии, только одну из них.Оставаясь таким образом:

enter image description here

Мой код:

HTML 

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
</button>

CSS 

.navbar-toggler {
  position: relative;
  float: right;
  width: 40px;
  height: 40px;
  margin-top: 5px;
  margin-right: 5px;
  cursor: pointer;
  z-index: 99999;
}

.navbar-toggler span {
  height: 4px;
  background: #545454;
  transition: 0.2s all;
}

.navbar-toggler span:before, .navbar-toggler span:after {
  content: "";
  display: block;
}

1 Ответ

0 голосов
/ 25 августа 2018

Вы можете использовать юникод HTML &#9776; для значка гамбургера

Вы можете найти больше здесь: https://www.w3schools.com/charsets/ref_utf_symbols.asp

.navbar-toggle
{
font-size:25px; 
background:none; 
border:none;
}
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">&#9776;                 
</button>

Вы также можете анимировать значок, см .: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js

...