hallo,
ik ben bezig met het maken van een mobiele webversie van mijn website. Maar op een of andere manier komt het menu aan de bovenkant er niet goed uit te zien. Er blijft op een mobiel apparaat steeds iets van 10 pixels bovenaan staat terwijl deze wel weg zijn op mijn computer. Als dit te onduidelijk is zal ik een paar afbeeldingen toevoegen.
ik ben bezig met het maken van een mobiele webversie van mijn website. Maar op een of andere manier komt het menu aan de bovenkant er niet goed uit te zien. Er blijft op een mobiel apparaat steeds iets van 10 pixels bovenaan staat terwijl deze wel weg zijn op mijn computer. Als dit te onduidelijk is zal ik een paar afbeeldingen toevoegen.
HTML:
<body class="menu">
<div id='menu'>
<nav class="menu-side">
<ul>
<li><a href='#'>test 1</a></li>
<li><a href='#'>test 2</a></li>
</ul>
</nav>
</div>
<a href="#" class="menu-toggle">Toggel</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
(function () {
var body = $('body');
$('.menu-toggle').bind('click', function() {
body.toggleClass('menu-open');
return fals;
});
})();
</script>
</body>
Code:
.menu{
overflow-x: hidden;
position: relative;
top:0px;
}
.menu-open{
top: 69px;
}
.menu-open .menu-side{
top: 0px;
}
.menu-side{
background-color:#252525;
border-bottom: 1px solid black;
position: fixed;
color: #fff;
top: -69px;
left: 0px;
width: 100%;
text-align: center;
}
.menu-side ul li{
list-style: none;
}
.menu-side ul li a{
text-decoration: none;
}
Laatst bewerkt:
