Подскажите, пожалуйста, не сталкивался ли кто нибудь с подобной проблемой, когда 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');