Гамбургер меню

@Freeze_Breeze · Регистрация: 12.01.2016

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

Всем добрый день и такое поведение меня не то, что убило, а поставило в ступор. Вообщем проблема заключается в том, что центральный элемент span не хочет принимать свойство background-color: #fff, главное два псевдоэлемента :after, :before принимают это свойство, а этот гад в упор не хочет этого делать я уже и на прямую задавал ему цвет фона со значением !important и ничего, не работает зараза. Думал проблема в bootstrap, нифига. Пошел в code-pen та же фигня. Черт пойми, что происходит с этим. Песочница

HTML5

<section class="title">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-2 col-md-12" style="text-align: center;">
                <h1 class="logo">blu<span>e</span>asy</h1>
            </div>
            <div class="col-lg-8 offset-lg-2">
                <nav class="main_menu">
                    <ul>
                        <li><a href="#">home</a></li>
                        <li><a href="#">services</a></li>
                        <li><a href="#">features</a></li>
                        <li><a href="#">portfolio</a></li>
                        <li><a href="#">contact</a></li>
                    </ul>
                </nav>
                 <a href="#" class="toggle-mnu"><span></span></a>
            </div>
        </div>
    <div class="row justify-content-center">
        <div class="col-lg-2 col-md-0"></div>
        <div class="col-lg-8 col-md-12">
            <h2 class="caption_start">"i'm looking for the unexpected"</h2>
        </div>
        <div class="col-lg-2 col-md-0"></div>
    </div>
    <div class="row justify-content-center">
        <div class="col-11">
            <h2 class="caption_end">"i'm looking for things i've never seen before"</h2>
        </div>
    </div>
    </div>
</section>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
 
body {
  background-color: #224477;
}
 
button:focus {
  outline: none !important;
}
 
body {
  font-family: 'SegoeUI';
  font-size: 100%;
  font-weight: normal;
}
 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
 
ol, ul {
  list-style: none;
}
 
img {
  vertical-align: baseline !important;
}
 
input,
textarea {
  color: #fff;
}
 
/*---Header---*/
.head {
  background-color: #353f46;
  height: 150px;
  position: absolute;
  opacity: 0.8;
}
 
header {
  line-height: 133px;
}
 
.logo {
  font-family: SegoeUIBold;
  font-size: 1.875rem;
  text-transform: uppercase;
  color: #fff;
}
 
.logo span {
  color: #4bcaff;
}
 
.main_menu {
  line-height: 149px;
  margin: 0;
}
 
.main_menu ul {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}
 
.main_menu ul li a {
  font-family: SegoeUIBold;
  color: #fff;
  font-size: 0.875rem;
  border: 2px solid transparent;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 18px;
  box-sizing: border-box;
}
 
.main_menu ul li a:hover {
  border: 2px solid #4bcaff;
  box-sizing: border-box;
  color: #4bcaff;
  transition: all 0.4s ease-in-out; 
}
/*---------------------------*/
 
/*---title---*/
.title {
  background-image: url(../image/other/background.jpg);
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
 
}
 
.caption_start,
.caption_end {
  font-family: SegoeUILight;
  font-size: 2.625em;
  text-transform: uppercase;
  color: #fff;
  background-color: #3b454d;
  opacity: 0.9;
  text-align: center;
  padding: 0.3125rem;
  margin-bottom: 258px;
}
 
.caption_start {
    margin-top: 16.25rem;
    margin-bottom: 0.75rem;
}
 
.toggle-mnu {
  width: 28px;
  height: 28px;
  position: absolute;
  /* z-index: 8000; */
  top: 100px;
}
 
.toggle-mnu span:after,
.toggle-mnu span:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
}
 
.toggle-mnu span:after {
  top: 18px;
}
 
.toggle-mnu span {
  position: relative;
  display: block;
}
 
.toggle-mnu span,
.toggle-mnu span:after,
.toggle-mnu span:before {
  width: 100%;
  height: 2px;
  background-color: #fff;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 2px;
}
 
.toggle-mnu.on span {
  background-color: transparent;
}
 
.toggle-mnu.on span:before {
  transform: rotate(45deg) translate(-1px, 0px);
}
 
.toggle-mnu.on span:after {
  transform: rotate(-45deg) translate(6px, -7px);
}

@Qwerty_Wasd · 01.04.2018, 15:25

Freeze_Breeze, ????????? - скрин

@Qwerty_Wasd · 01.04.2018, 15:28

Он белого цвета. Или я чет не понял

Добавлено через 1 минуту
Вы наверное хотите сделать смену цвета при наведении - фон белый, тостер черный?

@Freeze_Breeze · 01.04.2018, 15:31 **[ТС]**

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

@Qwerty_Wasd · 01.04.2018, 15:34

Freeze_Breeze, Все- понял

сместите ::before чуть ниже

он у вас на спане лежит

CSS

1	.toggle-mnu span:before{top:9px}

@Freeze_Breeze · 01.04.2018, 15:42 **[ТС]**

Qwerty_Wasd, аххахаххахха какой же я сейчас facepalm словил...

@Qwerty_Wasd · 01.04.2018, 15:43

Freeze_Breeze, да ладно

просто глаз замылился - бывает

@koba_1 · 02.04.2018, 10:23

Псевдоэлемент для гамбургера

CSS

1	content: '\2261';

Как я понял, вам третьей полоски не хватает?
И не надо там тега span, одной ссылки достаточно

CSS

1
2
3

.toggle-mnu:before {
  content: '\2261'; 
}

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

Используйте соответствующие теги в редакторе для форматирования кода [HTML], [CSS] и т.д.!

@Freeze_Breeze · 03.04.2018, 00:27 **[ТС]**

koba_1, а размеры (ширину и высоту), а скругление углов, а анимацию для гамбургера мне тоже через юникод писать?

@Mailo · 03.04.2018, 05:27

Погляжу в апреле в моде гамбургеры весенние, чтож у меня тоже есть один такой. Почему то нижняя полоска в фаерфоксе отображается толщиной в 3 пикселя, ума не приложу почему, в хроме её высота как и по коду 2px.

HTML5

1	<a class="burger"><span></span></a>

CSS

.burger{
    display: none;
    position: absolute;
    width: 22px;
    height: 12px;
    right: 20px;
    top: 17px;
    z-index: 4;
    &:hover{
        @include opa(7);
    }
    span{
        display: block;
        width: 100%;
        height: 2px;
        background: #000;
        position: absolute;
        left: 0;
        top: 5px;
        &:before{
            display: block;
            content: '';
            width: 100%;
            height: 2px;
            background: #000;
            position: absolute;
            left: 0;
            top: -5px;
        }
        &:after{
            display: block;
            content: '';
            width: 100%;
            height: 2px;
            background: #000;
            position: absolute;
            left: 0;
            top: 5px;
        }
    }
}

...

@AlexZaw · 03.04.2018, 08:12

В "вакууме", код который вы привели, в опере, лисе, хроме и ослике отображается нормально, так что проблема либо в расширениях, либо в других стилях

@Mailo · 03.04.2018, 14:13

Вот площадка.

@AlexZaw · 03.04.2018, 14:22

Опять же, во всех вышеперечисленных браузерах, все нормально. В лисе проверял в последних версиях quantum и developer

@Mailo · 03.04.2018, 16:21

Разобрался, баг называется зажал ctrl и крутанул кольцо мыши

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	01.04.2018, 15:25	2
	Freeze_Breeze, ????????? - скрин Миниатюры 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	01.04.2018, 15:28	3
	Он белого цвета. Или я чет не понял Добавлено через 1 минуту Вы наверное хотите сделать смену цвета при наведении - фон белый, тостер черный? 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	01.04.2018, 15:31 [ТС]	4
	Qwerty_Wasd, ну как бы гамбургер меню должно выглядеть так, а не как у меня без центральной полосы. Изображения 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	01.04.2018, 15:42 [ТС]	6
	Qwerty_Wasd, аххахаххахха какой же я сейчас facepalm словил... 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	01.04.2018, 15:43	7
	Freeze_Breeze, да ладно просто глаз замылился - бывает 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	03.04.2018, 00:27 [ТС]	9
	koba_1, а размеры (ширину и высоту), а скругление углов, а анимацию для гамбургера мне тоже через юникод писать? 0

@AlexZaw Модератор 2351 / 1719 / 668 Регистрация: 07.08.2016 Сообщений: 4,047
	03.04.2018, 08:12	11
	В "вакууме", код который вы привели, в опере, лисе, хроме и ослике отображается нормально, так что проблема либо в расширениях, либо в других стилях 0

@Mailo 244 / 221 / 31 Регистрация: 18.02.2010 Сообщений: 2,259
	03.04.2018, 14:13	12
	Вот площадка. 0

@AlexZaw Модератор 2351 / 1719 / 668 Регистрация: 07.08.2016 Сообщений: 4,047
	03.04.2018, 14:22	13
	Опять же, во всех вышеперечисленных браузерах, все нормально. В лисе проверял в последних версиях quantum и developer 1

@Mailo 244 / 221 / 31 Регистрация: 18.02.2010 Сообщений: 2,259
	03.04.2018, 16:21	14
	Разобрался, баг называется зажал ctrl и крутанул кольцо мыши 0