мобильное меню сайта не работает в браузере Safari - PullRequest
Новая
       7

мобильное меню сайта не работает в браузере Safari

0 голосов
/ 20 января 2019

Я работаю над этим проектом: https://kickit.gr/, и у меня проблема с мобильным меню домашней страницы (только!) В браузере Safari.

Когда нажата кнопка гамбургера, меню, даже если оно открывается и кликабельно, оно невидимо!

Мобильное меню эффективно <ширина экрана 750 пикселей. </p>

У меня нет iphone и отладки через сайтыс виртуальными браузерами сафари не так эффективно.Я попытался изменить некоторые CSS, но безуспешно ...

Вы можете проверить проблему на живом сайте.

Вот большая часть относительного кода: 

function hamburgerButtonClick() {
  var hamburger = $('.hamburger');
  var menu = $('.menu');

  var is_active = 'is-active';
  var mobile_menu = 'mobile_menu';

  if (!hamburger.hasClass(is_active)) {
    hamburger.addClass(is_active);
    menu.addClass(mobile_menu);
  } else {
    hamburger.removeClass(is_active);
    hamburger.removeClass(mobile_menu);
    menu.removeClass(mobile_menu);
  }
}
.sticky_menu .menu {
  display: block;
  text-align: center;
  padding-top: 30px;
  margin: 0 auto;
  float: none;
}

.mobile_menu {
  display: block !important;
  width: 100%;
  position: fixed;
  top: 70px;
  background: #191b1a;
  padding-top: 10px;
  color: #ffffff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="sticky_menu" id="sticky_menu">
  <div class="menu_holder">
    <div class="logo"></div>
    <button class="hamburger hamburger--spin" type="button" onclick="hamburgerButtonClick()">
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </button>
    <div class="menu">
      <ul>
        <li></li>
      </ul>
      <div class="social_menu_mobile"></div>
    </div>
  </div>
</nav>

.is_active класс используется для анимации значка меню гамбургера, я не думаю, что он имеет отношение к проблеме.

Любая помощь приветствуется!

1 Ответ

0 голосов
/ 04 февраля 2019

очевидно, есть некоторые проблемы с overflow: hidden в Safari iOS.

Я удалил свойство, нацеленное на узел, в header_frontpage.css. Теперь он работает как задумано.

...