Bom dia, o meu topo não está fixado quando é rolado a pagina ao fazer um scroll ele sobe junto poderia verificar oque fiz de errado?
CODIGO HTML :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Só de Cenoura Garçom</title>
<link rel="stylesheet" href="icons/material.css">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div> <!--FIXO-->
<div class="#42a5f5 blue lighten-1 white-text valign-wrapper">
<h5 class="titulo">Texto Tete</h5>
<div>
<i class="material-icons waves-effect waves-light waves-circle">more_vert</i>
</div>
</div>
<ul class="tabs #42a5f5 blue lighten-1">
<li class="tab"><a href="#bolos" class="white-text waves-effect">Bolos</a></li>
<li class="tab"><a href="#bebidas" class="white-text waves-effect">Bebidas</a></li>
</ul>
</div><!--FIXO-->
<div class="section" id="bolos">
<div class="collection">
<a class="collection-item waves-effect black-text">Só de Cenoura</a>
<a class="collection-item waves-effect black-text">Com Nutela</a>
<a class="collection-item waves-effect black-text">Chocolate</a>
<a class="collection-item waves-effect black-text">Só de Cenoura</a>
</div>
</div>
<div class="section" id="bebidas">
<h6 class="container">Café</h6>
<div class="collection">
<a class="collection-item waves-effect black-text">Expresso</a>
<a class="collection-item waves-effect black-text">Garana</a>
<a class="collection-item waves-effect black-text">champ</a>
<a class="collection-item waves-effect black-text">Só de Cenoura</a>
</div>
<h6 class="container">Refrigerentes</h6>
<div class="collection">
<a class="collection-item waves-effect black-text">Coca</a>
<a class="collection-item waves-effect black-text">Garana</a>
<a class="collection-item waves-effect black-text">champ</a>
<a class="collection-item waves-effect black-text">Só de Cenoura</a>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/materialize.min.js"></script>
</body>
</html>
CSS :
.tabs .indicator{
background-color: white;
}
body {
background-color: #f2f2f2
}
.titulo {
font-size: 1.3rem;
margin-left: 5%;
margin-right: auto;
}
.topo-fixo{
position: fixed;
top: 0;
width: 100%;
z-index: 2;
}
.section {
padding-top: 125 px;
}