У меня возникают проблемы с пейзажем мобильного меню, - я не могу прокручивать. Чтобы очистить меня, прокрутив, поэтому я вижу все меню. При прокрутке теперь он останавливается после определенного количества пикселей (высота заголовка). Пожалуйста, уменьшите окно, чтобы он выглядел как мобильный пейзаж, если вы хотите взглянуть самим.
Как видно из изображения, вы не можете видеть все меню.
Проблема заключается в следующем:
header {
position: fixed;
}
Он должен быть исправлен, но я должен иметь возможность прокручивать. Любые предложения?
Я попытался удалить часть кода, чтобы было легче понять.
HTML
<header class="nav-down">
<nav class="navbar navbar navbar-fixed-top site-navigation" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Aarseth-Navbar">
<section class="si-icons si-icons-default">
<span class="si-icon si-icon-hamburger-cross" data-icon-name="hamburgerCross"></span>
</section>
</button>
<div id="navbar-brand-cont">
<a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.jpg">
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="Aarseth-Navbar">
<ul class="nav navbar-nav">
<?php wp_nav_menu( array( 'menu' => 'Hovedmeny', 'menu_class' => 'nav-menu' )); ?>
</ul>
</div>
</nav>
</header>
CSS
header {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.nav-up {
top: -120px;
}
.navbar-fixed-top {
position: absolute;
}
.nav-menu {
margin-top: 90px;
padding-bottom: 25px;
}
@media screen and (max-width: 767px) {
header {
height: 100px;
}
.site-navigation ul {
display: block;
}
#Aarseth-Navbar ul li {
clear: both;
margin-left: 0;
float: none;
display:block;
margin-top: 15px;
padding-bottom: 15px;
}
.navbar-collapse {
height: auto;
max-height:none;
margin-top: 20px;
padding-left: 0;
padding-right: 0;
}
#Aarseth-Navbar {
overflow: hidden;
}
.navbar-nav {
width: 100%;
}
.menu-hovedmeny-container {
padding-top: 0px;
}
.nav-menu {
padding-left: 0px;
padding-bottom: 0px;
}
.site-navigation ul {
width: 100%;
}
.menu-hovedmeny-container {
padding-right: 0px;
}
.navbar-brand {
padding-bottom: 0px;
}
.sub-menu {
display: block;
width: 100%;
position: relative;
}
.navbar-collapse {
max-height: none!important;
}
}
Если вы хотите взглянуть: http://goo.gl/GZaM5K
Примечание. Я работаю над исправлением значка меню прямо сейчас, поэтому, если вы его не видите, нажмите на правый угол, где естественно, что значок гамбургера/меню. Href работает, его просто svg, с которым у меня возникают проблемы.
Пожалуйста, спросите, не ясно ли что-то.
Если вы хотите, чтобы ваш мобильный, выпадающий навигатор был прокручиваемым, вы должны определить height с оберткой div, которую вы закодировали, чтобы заключить мобильный навигатор. Вы должны определить высоту, и вы должны установить overflow-y в scroll, а также добавить touch прокрутку.
#MobileMenuDivWrapper {
height: 200px;
max-height: 200px;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling:touch; // mobile safari
}