Margaret Margaret - 29 days ago 13
CSS Question

Responsive mobile menu opening issue when I turn my device horizontally

I made a responsive menu for mobiles, but when I turn my device horizontally the menu opens immediately and I can't scroll on it. The only way is putting the phone back on portrait position. Please help! I'm new to this.

The website is www.josefinaechenique.com

Code down below:

HTML

<!--menu mobile-->
<nav id="navigation_mobile">
<ul>
<li><a href="index.html" onclick="location.replace('index.html')">Inicio</a></li>
<li><a href="biografia.html" onclick="location.replace('biografia.html')">Biografía</a></li>
<li><a href="musica.html" onclick="location.replace('musica.html')">Música</a></li>
<li><a href="videos.html" onclick="location.replace('videos.html')">Videos</a></li>
<li><a href="conciertos.html" onclick="location.replace('conciertos.html')">Conciertos</a></li>
<li><a href="contacto.html" onclick="location.replace('contacto.html')">Contacto</a></li>

<div class="social_icons2">
<a href="musica.html" onclick="window.open('https://www.instagram.com/lajoseoficial/')"><img src="img/insta_logo.png" width="17" height="17" alt=""/></a>
<a href="musica.html" onclick="window.open('https://www.facebook.com/lajoseoficial/')"><img src="img/fb_logo.png" width="17" height="17" alt=""/></a>
<a href="musica.html" onclick="window.open('https://www.youtube.com/user/proserfina/')"><img src="img/youtube_logo.png" width="17" height="17" alt=""/></a>
</div>
</ul>
</nav>

<!--button toggle-->
<div class="menu_bar">
<p class="bt-menu"><span class="icon-list2">
</span>Josefina<br>Echenique</p>
</div>


CSS

#navigation_mobile {
display: block;
width: 100%;
top: -100%;
margin-top: 66px;
position: fixed;
z-index: 9999;
background-color: #323034;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}

#navigation_mobile ul {
overflow: hidden;
margin-top: 0px;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 0px;
padding: 0px;
}

#navigation_mobile ul li {
display: block;
float: none;
text-align: center;
border-bottom: 1px solid rgba(0,0,0, .15);
padding: 12px;
}

.menu_bar {
width: 100%;
display: block;
background-color: #323034;
position: fixed;
box-shadow: 20px 5px 15px rgba(0, 0, 0, 0.15);
z-index: 9999;
}


JS

// JavaScript Document
$(document).ready(main);

var contador = 1 ;

function main (){
$('.menu_bar').click(function(){
if(contador == 1){
$('nav').animate({
top: '0'
});

contador = 0;
} else {
contador = 1;
$('nav').animate({
top: '-100%'
});

}

});


}


Here is a picture of the problem.

horizontal posisiton (wrong)
Figure 3

Answer Source

The problem might be happening because the .menu_bar and #navigation_mobile style rules have the same z-index, but I'm not 100% sure that is the issue. You could try reducing the z-index on #navigation_mobile and see if that works.

If that does not work, this will probably fix your problem:

Edit the CSS stylesheet to remove margin-top: 66px from #navigation_mobile. Then edit your Javascript as follows:

// JavaScript Document
$(document).ready(main);

var contador = 1 ;

function main (){
$('.menu_bar').click(function(){
    if(contador == 1){
        $('nav').animate({
            top: '66px'
        });

        contador = 0;
    } else {
        contador = 1;
        $('nav').animate({
            top: '-100%'
        });

    }

});


}