Я уже несколько дней пробовал свой мозг, пытаясь это исправить. У меня есть липкий заголовок, который использует немного JQuery:Sticky Header Overlaps Навигация по мобильному телефону
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
</script>
Затем в моем заголовке у меня есть мобильное меню, который скрыт с помощью медиа-запроса до тех пор, мин-ширина 750px. HTML выглядит следующим образом:
<div class="menu-button">
<i class="fa fa-align-justify"></i>
<span>Menu</span>
</div>
<div class="secondary-nav-wrapper">
<nav role="navigation" class="responsive-nav">
<ul>
<li class="menu-title">
Where to?
</li>
<li>
<a href="index.php" class="home" title="Home">Home</a>
</li>
<li>
<a href="contact/contact.php" class="contact" title="About and Contact">About</a>
</li>
<li>
<a href="portfolio.php" class="portfolio" title="Portfolio">Portfolio</a>
</li>
</ul>
</nav>
</div>
Я использую SASS для моего CSS, который выглядит следующим образом:
body.shift-left {
background-color: $softblack;
div.page {
@include transition(all 0.25s ease 0s);
left: -345px;
position: relative;
top: 0;
header {
div.secondary-nav-wrapper {
display: block;
position: fixed;
right: 12px;
top: 8px;
width: 324px;
nav.responsive-nav {
display: block;
ul {
padding: 0;
margin: 0;
line-height: 46px;
li.menu-title {
font-family: $font-primary;
color: white;
font-size: 2em;
background-color: $blackgrey;
padding: 5px 5px 5px 15px;
}
li {
font-family: $font-default;
color: $lightgrey;
font-size: 1.5em;
a {
display: block;
}
}
hr {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}
}
}
}
}
}
}
Теперь (наконец) добраться до точки. Он отлично работает на рабочем столе, именно так, как я хочу, чтобы это выглядело:
Тогда всякий раз, когда я получаю на мобильном устройстве: As you can see, заголовок перекрывает меню, глядя страшно.
Как работает меню: Я использую jQuery для добавления класса в тело, и когда он это делает, я создал его так, чтобы тело перемещалось вправо или влево в зависимости от меню.
HTML, в который добавлен класс, выглядит следующим образом.
<body class="" id="home">
<div class="page">
<header>
Я понятия не имею, что происходит. Я поднял глаза, если фиксированная позиция ломается на мобильном телефоне, но не получила четкого ответа; Я пробовал использовать z-index, и это не имеет значения. Я даже попытался позиционировать его абсолютно, и все, кроме цвета фона на «div.page», выходит на передний план. Это «исправление» выглядело в порядке на минуту, пока я не прокрутился вниз, и заголовок сломался, и логотип занял верхнюю позицию.
Если вы хотели бы видеть для себя то, что я говорю, мой тестовый сайт: kevindenchdesign.com/playground/index.php Пребывание на главной странице, как я пытаюсь решить эту проблему для мобильных устройств на этой странице сначала. Остальные страницы сломаны, и многие ссылки работают не слишком хорошо. Так что идите и проверьте страницу индекса.
Я очень ценю любую помощь или совет по этому вопросу, поскольку правильная работа с навигацией для мобильных устройств - это хорошо. Я открыт для других способов сделать меню, если вы не можете понять это и готовы поделиться кодом.
Еще раз спасибо, у нас отличный выходной.
Я удалил свой комментарий о предложении, не стесняйтесь следовать - тогда я могу удалить это, чтобы закрыть цикл. –