Позиционирование гамбургер меню в браузере Chrome и FireFox

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

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

Всем добрый вечер и вот проблема. С таким я еще не сталкивался. В разных браузерах, а именно в Chrome и FireFox один и тот же элемент показывает разное положение этого элемента (скрины смотреть ниже). Что это и как оно происходит... Я в первые такое вижу. В code pen она вообще улетела в самый низ... песочница

HTML5

<section class="portfolio">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-2">
                <h3 class="portfolio_head">portfolio</h3>
            </div>
            <div class="col-md-8 offset-md-2" style="padding: 0;">
                <nav class="mnu">
                 <ol>
                    <li><a href="#">**all**</a></li>
                    <li><a href="#">panoramas</a></li>
                    <li><a href="#">portraits</a></li>
                    <li><a href="#">macro</a></li>
                    <li><a href="#">journal</a></li>
                 </ol>
                </nav>
            </div>
            <a href="" class="portfolio-toggle-mnu"><span></span></a>
        </div>  
          </div>
</section>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
 
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---*/
 
.portfolio_head {
  font-family: SegoeUILight;
  font-size: 1.875rem;
  color: #222;
  text-transform: uppercase;
  padding-bottom: 0.25rem;
  position: relative;
}
 
.portfolio_head:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 2px solid #222;
  width: 46px;
}
 
.mnu ol {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}
 
.mnu ol li a {
  font-family: SegoeUIBold;
  color: #515f67;
  font-size: 0.875rem;
  border: 2px solid transparent;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 18px;
  box-sizing: border-box;
}
 
.mnu ol li a:hover {
  border: 2px solid #4bcaff;
  box-sizing: border-box;
  color: #4bcaff;
  transition: all 0.3s ease-in-out;
}
 
.portfolio {
  margin-top: 8rem;
  margin-bottom: 8rem;
}
 
/*------adaptive mnu portfolio---------*/
.portfolio-toggle-mnu {
  width: 28px;
  height: 28px;
  position: absolute;
  right: 15px;
  bottom: -506px;
  display: none;
}
 
.portfolio-toggle-mnu span:after,
.portfolio-toggle-mnu span:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
}
 
.portfolio-toggle-mnu span:after {
  top: 18px;
}
 
.portfolio-toggle-mnu span:before {
  top: 9px;
}
 
.portfolio-toggle-mnu span {
  position: relative;
  display: block;
}
 
.portfolio-toggle-mnu span,
.portfolio-toggle-mnu span:after,
.portfolio-toggle-mnu span:before {
  width: 100%;
  height: 2px;
  background-color: #000;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 2px;
}
 
.portfolio-toggle-mnu.on span {
  background-color: transparent;
}
 
.portfolio-toggle-mnu.on span:before {
  transform: rotate(45deg) translate(0, 0);
}
 
.portfolio-toggle-mnu.on span:after {
  transform: rotate(-45deg) translate(6px, -7px);
}
/*----------------------------------*/
 
 
/*-----Portfolio background-------*/
 
 
/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {
    /*-----Adptive menu title-----*/
    .mnu {
        display: none;
    }
    /*------adaptive menu portfolio----------*/
    .portfolio-toggle-mnu {
        display: block;
    }
 
    .mnu ol li {
        line-height: 80px;
    }
    
    .mnu ol li a {
        padding: 11px 33%;
    }
 
    .portfolio-toggle-mnu {
        bottom: -506px;
  }
}
 
/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {
    .wrapper_services {
        width: 100%;
        text-align: center;
    }
  
    .portfolio-toggle-mnu {
        bottom: -1097px;
    }
}
 
@media only screen and (max-width: 576px) {
    .portfolio-toggle-mnu {
        bottom: -1169px;
    }
}

Javascript

$(".portfolio-toggle-mnu").click(function() {
  $(this).toggleClass("on");
  $(".mnu").slideToggle();
  return false;
});

@Qwerty_Wasd · 07.04.2018, 20:54

Freeze_Breeze, приветствую. Это что за.... ну блин

CSS

@media only screen and (max-width: 576px) {
    .portfolio-toggle-mnu {
        bottom: -1169px;
    }
}

CSS

1
2
3

.portfolio-toggle-mnu {
        bottom: -1097px;
    }

CSS

1	bottom: -506px;

Начните сначала.

@koba_1 · 07.04.2018, 20:54

и по моему у Вас с разметкой бутстрап что-то не то (

@Freeze_Breeze · 07.04.2018, 21:28 **[ТС]**

koba_1, например

Добавлено через 5 минут
Qwerty_Wasd, за счет абсолютного позиционирования элемент при уменьшении ширины экрана подымается вверх, а эти правила опускают гамбургер в низ. Странное решение я и сам не в восторге от этого но на тот момент оно было работающее, а почему не сделал родительский relative уже не помню, видимо там что то пошло не так раз я не принял такое решение.

@Qwerty_Wasd · 07.04.2018, 22:13

Добавлено через 6 минут
Freeze_Breeze, лучше начать сначала, а чтобы избежать

Сообщение от Freeze_Breeze

а почему не сделал родительский relative уже не помню

и т.п. верстайте модульно. Чтобы страница как лего собиралась.

@Mailo · 08.04.2018, 14:46

А давайте сыграем в меню, "угадай высоту контента", победитель получает гамбургером в шапку.

CSS

1
2
3

.portfolio-toggle-mnu {
  bottom: -506px;
}

@Freeze_Breeze · 08.04.2018, 15:32 **[ТС]**

Mailo, вот только давайте без сарказма, ладно? Если верхний гамбургер у меня под шапкой сайта встал отлично, отлично (потому что position: absolute

отталкивается от окна браузере и при масштабировании он не уходит вверх (рис. 1), то при точно таких же правилах другой гамбургер, который находится через одну секцию при уменьшении ширины экрана уходит вверх, что и заставило меня сделать bottom: -506px; и bottom: -1169px;, что бы он не уходил вверх, а оставался на одном месте. Сейчас же пробую другой способ позиционирования. На тот момент было самое логичное решение (как мне казалось).

@koba_1 3 / 3 / 1 Регистрация: 26.12.2012 Сообщений: 32
	07.04.2018, 20:54	3
	и по моему у Вас с разметкой бутстрап что-то не то ( 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	07.04.2018, 21:28 [ТС]	4
	koba_1, например Добавлено через 5 минут Qwerty_Wasd, за счет абсолютного позиционирования элемент при уменьшении ширины экрана подымается вверх, а эти правила опускают гамбургер в низ. Странное решение я и сам не в восторге от этого но на тот момент оно было работающее, а почему не сделал родительский relative уже не помню, видимо там что то пошло не так раз я не принял такое решение. 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	07.04.2018, 22:13	5
	Добавлено через 6 минут Freeze_Breeze, лучше начать сначала, а чтобы избежать Сообщение от Freeze_Breeze а почему не сделал родительский relative уже не помню и т.п. верстайте модульно. Чтобы страница как лего собиралась. 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	08.04.2018, 15:32 [ТС]	7
	Mailo, вот только давайте без сарказма, ладно? Если верхний гамбургер у меня под шапкой сайта встал отлично, отлично (потому что position: absolute отталкивается от окна браузере и при масштабировании он не уходит вверх (рис. 1), то при точно таких же правилах другой гамбургер, который находится через одну секцию при уменьшении ширины экрана уходит вверх, что и заставило меня сделать `bottom: -506px;` и `bottom: -1169px;`, что бы он не уходил вверх, а оставался на одном месте. Сейчас же пробую другой способ позиционирования. На тот момент было самое логичное решение (как мне казалось). Миниатюры 0