Estou fazendo alguns testes e eu queria tirar o scroll de cima da navbar, mas deixar no restante do conteúdo principal da página ou seja abaixo da navbar, mas não estou conseguindo. Algo parecido com o que acontece nessa página:
https://getmdl.io/templates/portfolio/index.html
Essa é minha página:
Quero deixar assim:
Meu código é:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale = 1.0">
<style>
html {
height:100%;
}
body {
height: auto;
font-size:14px;
background: black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Roboto', sans-serif;
}
html.cursor {
cursor: pointer;
}
nav {
font-family: 'Roboto', sans-serif;
width: 100%;
height: 59px;
border-bottom:1px solid #ddd;
position: fixed;
top:0;
left:0;
z-index:20;
background-color:#F6F6F6;
}
nav ul,
#sideNav ul,
#sideNav ul ul {
margin:0;
padding:0;
list-style:none;
}
nav li {
margin:0;
float:left;
border-right:1px solid #ddd;
font-size:18px;
}
nav a,
#sideNav a {
color:#5b6064;
text-decoration:none;
display:block;
padding:10px 30px;
height:59px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
line-height:35px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#" class="icon icon-menu" id="btn-menu">Menu</a></li>
</ul>
</nav>
<div id="sideNav">
<ul>
</ul>
</div>
<div class="container">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>