I am having some troubles with the mobile menu landscape, - I am unable to scroll. To clearify I ment by scrolling so I see the whole menu. When scrolling now, it stopps after a certain amount of px (the height of the header). Please minimize the window so it looks like mobile landscape if you want to take a look by yourself.
As the image shows, you are not able to see the the whole menu.
The problem is the following:
header {
position: fixed;
}
It needs to be fixed, but I must be able to scroll. Any suggestions?
I have tried to remove some part of the code to make it easier to understand.
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;
}
}
If you want to take a look: http://goo.gl/GZaM5K
Note: I am working on fixing the menu icon right now, so if you don't see it, press at the right corner where it's naturally that the hamburger/menu icon is. The href works, its just the svg that I am having some troubles with.
Please ask if something is unclear.