Позиционирование гамбургер меню в браузере Chrome и FireFox - HTML, CSS - Ответ 12287713

@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;
});

Вернуться к обсуждению:
Позиционирование гамбургер меню в браузере Chrome и FireFox HTML, CSS

Следующий ответ

Другие темы раздела
HTML, CSS перенос таблицы на сайт https://www.cyberforum.ru/ html/ thread2224955.html Доброго времени суток, помогите пожалуйста , надо закинуть таблицу из openoffice на страницу сайта , чтобы отображалась как содержимое страницы , сохраняю в HTML , через блокнот беру код и вставляю на сайт в текст страницы получается , но как то очень криво . должно быть как в PDF. , а получается как на скрине, часть кода приложил в doc. Что нужно править в коде и на какое значение , чтобы все...	HTML, CSS Центрирование картинки в div, которая вылазит за границы div Проблема: центрирование картинки в div, которая вылазит за границы div`а. Что можете посоветовать, у меня не получается. Картинки: 1 - Как есть по умолчанию. 2 - Как должно быть. 3 - Как получилось. Заранее спасибо ):p
HTML, CSS Owl carousel - 2 момента https://www.cyberforum.ru/ html/ thread2224629.html Коллеги, просьба помочь советом. Сайт www.lazurit.mini-mall.ru Установил 2 слайдера owl-carousel в первом куда то "спрятались" стрелки навигации, при уменьшении разрешения, появляются, как их вывести на свет божий, посоветуйте. А во втором никак не могу выровнять текстовый блок с отзывами по вертикали, все способы вроде попробовал - не получается!	HTML, CSS Div не растягивается по высоте после пополнения контента https://www.cyberforum.ru/ html/ thread2224537.html Здравствуйте. Помогите решить походу простейшую задачу, над которой ломаю голову уже 2 часа. У меня есть 3 дива (3 колонки) left, center , right. Во всех стоит min-height и height auto. Мне нужно, чтобы при пополнении контента (к примеру через форму на странице) средний див растягивался а за ним растягивались и левый с правым. У меня же текст уходит вниз за футер. <html> <head> <meta...
HTML, CSS Появляется горизонтальный скролл при анимации блоков Здравствуйте, помогите решить проблемку, задал анимация блокам, с помощью библиотеки animate.css и wow.js блоки выезжают по бокам, но при этом появляется горизонтальный скролл. Как это можно исправить?	HTML, CSS Выравнивание элементов списка Есть нумерованный список, там вместо пунктов(точек) должны быть картинки. У меня текст сидит на нижней границе этого блока(прилеплю скриншот), а нужно по центру по вертикали. И дайте рекомендации по лучшему оформлению html пожалуйста, а то я первый раз.. *стили засуну потом отдельно в css. <html style="background: #000;"> <head> <title>Каталог</title> <style> ul li{ ... https://www.cyberforum.ru/ html/ thread2224262.html
HTML, CSS Вызов блока из одного скрипта на все остальные страницы HTML Здравствуйте! Подскажите пожалуйста как вызвать кусок кода на все страницы сайта. Возможно вопрос будет не совсем ясен. Мне нужно что бы изменив код на одной странице, этот же блок заменился на всех остальных. К примеру заменив рекламный баннер на главной странице, заменился блок рекламы на всех остальных страницах. Сайт на HTML. Каждая страница отдельным файлом. https://www.cyberforum.ru/ html/ thread2224244.html	Выровнять по центру, вертикаль HTML, CSS Высота блока в процентах, как расположить в блоке еще один блок и выровнять его по центру(вертикали). line-height: 300%; Как?
HTML, CSS Установка формата в type="datetime-local" Нужно только для телефонов. Как можно отобразить формат типа 06 апр 2018, 8:18? Пробовала через js в value отображать так: 06 04 2018T8:18, но в айфоне дата показывается так: 6 Apr 2018 at 8:18, а на андроиде вообще кошмар: 04/06/2018, 8:18 AM Как же заставить их всех выводить в нужном формате и месяц писать по русски ну или по английски, но только не цифрами, а буквами? https://www.cyberforum.ru/ html/ thread2224228.html	HTML, CSS Через CSS дать определённые параметры для определённой таблицы https://www.cyberforum.ru/ html/ thread2224171.html Здравствуйте! У меня есть две таблицы на HTML, но мне нужно задать параметры только для одной из них, можно ли это реализовать с помощью CSS?
таблица по макету с hover эффектами HTML, CSS Дан такой макет, из всего знаю только как сделать таблицу, остальное не очень понятно.Может подскажите как без js сделать hover эффекты? не очень понятно как вставить в название столбцов иконку-кнопку информация и сортировка.Полагаю, что при нажатии инфо должен выдавать текст.При нажатии столбца и строки подсвечиваются линия их пересечения.Как сделать эти эффекты?	HTML, CSS Почему не работает :frist-child в xmlt ie8 <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" indent="yes"/> <xsl:template match="/"> </xsl:template> </xsl:stylesheet><style type="text/css"> https://www.cyberforum.ru/ html/ thread2224084.html

	07.04.2018, 19:39