glem1337
@glem1337

Почему slicknav не отображается на IOS?

Подскажите, пожалуйста, не сталкивался ли кто нибудь с подобной проблемой, когда slicknav под ios не отображается. Точнее "кнопка-бургер". Под другими платформами все отлично. Сам сайт не могу показать.

Я вообще не сторонник плагинов, но мне поставили таск разобраться почему он не работает. Битый час я сижу и не могу понять. Может кто со свежей головой посмотрит и сразу найдет в чем подвох. Уже приходят мысли, что бы полностью переделать это адаптивное меню.

Код CSS:
/* custom menu*/

.slicknav_menu {
    /*position: absolute;*/
    top: 0;
    width: 100%;
    z-index: 100;
    padding: 0;
    overflow-y: auto;
    background: transparent;
}
.slicknav_menu-open .slicknav_menu {
    position: fixed;
    bottom: 0;
}
@media (min-width: 992px) {
    .slicknav_menu {
        display: none;
    }
}
.slicknav_nav {
    padding-top: 70px;
    padding-bottom: 10px;
    background: #3674b4;
}
.slicknav_menu-open {
    overflow: hidden !important;
}

/*.slicknav_btn*/
.slicknav_btn {
    line-height: 1;
    position: fixed;
    z-index: 101;
    top: 15px;
    right: auto;
    bottom: auto;
    left: 15px;
    float: none;
    width: auto;
    margin: 0;
    padding: 8px;
    text-decoration: none;
    border: 1px solid #3674b4;
    border-radius: 0;
    background-color: rgba(255, 255, 255, .6);
    text-shadow: none;
}
.slicknav_menu-open .slicknav_btn {
    border-color: #fff;
    background-color: rgba(54,116,180, .6);
}
.slicknav_menu .slicknav_icon {
    float: none;
    width: 100%;
}
.slicknav_menu .slicknav_icon:before {
    position: absolute;
    display: block;
    width: 30px;
    height: 3px;
    content: '';
    background: transparent;
}
.slicknav_menu .slicknav_icon-bar {
    display: block;
    width: 35px;
    height: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #3674b4;
}


Код JS:
var slicknavNav = '.slicknav_nav';
        $('.is-mobile .skew_fon').remove();
        $('.is-mobile .head__nav-item > a').unwrap();
        $(".is-mobile .sub__menu-item").replaceWith(function(index, oldHTML){
            return $("<ul>").html(oldHTML);
        });
        $('.is-mobile .head__nav-inner').slicknav({
            prependTo: '.page__header',
           closeOnClick: true,
           allowParentLinks: true,
           // label: 'МЕНЮ',
           label: '',
           nestedParentLinks: false
        });

        var slicknavMenuOpen = 'slicknav_menu-open';
        var body = $('body');
        var slicknav_btn = $('.slicknav_btn');
        slicknav_btn.on('click', function() {
            body.toggleClass(slicknavMenuOpen);
        });
         $(".slicknav_menu").prepend("<div class='slicknav_menu-bar'><div class='slicknav_menu-bar__inner'></div></div>");
        $('.is-mobile .search__box').prependTo('.slicknav_menu-bar__inner');
        $('.is-mobile .search__box').prependTo('.slicknav_menu-bar__inner');
        $('.is-mobile .send__quest').prependTo('.slicknav_menu-bar__inner');
        $('.is-mobile .you__city-area').prependTo('.slicknav_menu-bar__inner');
  • Вопрос задан
  • 115 просмотров
Пригласить эксперта
Ответы на вопрос 1
@vaajnur
битриксоид
.slicknav_btn {
    position: fixed;

в сафари были проблемы с позишн фиксед.
https://stackoverflow.com/questions/22167382/posit...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
22 нояб. 2024, в 03:54
1500 руб./за проект
22 нояб. 2024, в 02:56
10000 руб./за проект
22 нояб. 2024, в 00:55
500 руб./за проект