I have the following problem. with the navbar 
When you download the image, it overlaps the navigation bar . I do not know what the problem could be (I paste the code).
Start - > - > - >
<div class="col s12 m4 offset-m3">
<div class="row">
<div id="links-superiores">
<ul class="left hide-on-small-and-down">
<li><a class="link" href="nosotros.html">Nosotros</a></li>
<li><a class="link" href="empleo.html">Empleo</a></li>
<li><a class="link" href="contacto.html">Contacto</a></li>
<li><a class="link" href="ayuda.html">Ayuda</a></li>
</ul>
</div>
</div>
<div class="row" style="margin-bottom: 0px; /*Quita espacio entre el div del logo*/">
<div class="left hide-on-med-and-down">
<a href="tel:2228530500"><i class="material-icons" style="font-size: 25px;">phone</i><span id="telefono">Telefono:
2228530500</span></a>
</div>
</div>
</div>
</div>
<!--Menu de navegación principal-->
<div id="navegacionPrincipal" class="row">
<div class="navbar">
<nav class="tarjetaPushpin">
<div class="nav-wrapper blue lighten-2">
<div class="container">
<div class="nav-wrapper">
<a href="index.html" data-activates="mobile-menu" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="hide-on-small-and-down">
<li><a href="tratamientos.html">Tratamientos</a></li>
<li><a href="precios.html">Precios</a></li>
<li><a href="clinicas.html">Clínicas</a></li>
<li><a href="hacer-cita.html" class=" blue-text waves-effect waves-yellow blue lighten-5 btn"><span>Reservar
Cita</span></a></li>
</ul>
</div>
<ul class="right hide-on-med-and-down fa-ul">
<li><a href="index.html"><span class="fa-li"><i class="fas fa-sign-in-alt"></i></span>Login
médico</a></li>
<!--<li><a href="index.html"><i class="fas fa-sign-in-alt" style=" vertical-align: middle;"></i>Login
médico</a></li> -->
</ul>
</div>
</nav>
</div>
<!--Menu de navegacion Mobil -->
<ul class="side-nav" id="mobile-menu">
<li><a href="index.html" class="blue-text">Inicio</a></li>
<li><a href="tratamientos.html" class="blue-text">Tratamientos</a></li>
<li><a href="precios.html" class="blue-text">Precios</a></li>
<li><a href="clinicas.html" class="blue-text">Clínicas</a></li>
<li><a href="hacer-cita.html" class="blue-text waves-effect waves-yellow blue lighten-5 btn">Reservar
Cita</a></li>
<li><a href="index.html" class="blue-text"><i class="fas fa-sign-in-alt"></i>Login médico</a></li>
</ul>
</div>
<!--Inicio del Slider-->
<div class="slider">
<ul class="slides">
<li>
<img class="responsive-img" src="img/dentista.jpg">
<div class="caption center-align">
<h3>Evaluación sin costo en tu primera cita</h3>
<h5 class="light grey-text text-lighten-3">Aplica a niños menores de 15 años</h5>
<a href="#" class="btn btn-medium blue darken-1">Saber mas...</a>
</div>
</li>
<li>
<img class="responsive-img" src="img/doctor.jpg">
<div class="caption left-align">
<h3>Médicos capacitados</h3>
<h5 class="light grey-text text-lighten-3">Hospitalidad, buena atención de nuestro personal</h5>
<a href="#" class="btn btn-medium blue darken-1">Saber mas...</a>
</div>
</li>
<li>
<img class="responsive-img" src="img/ani-kolleshi-640938-unsplash.jpg">
<div class="caption right-align">
<h3>Gran variedad de servicios.</h3>
<h5 class="light grey-text text-lighten-3">Consulta nuestro Catalogo de Servicios</h5>
<a href="#" class="btn btn-medium blue darken-1">Saber mas...</a>
</div>
</li>
<li>
<img class="responsive-img" src="img/yingpis-kalayom-133680-unsplash.jpg">
<div class="caption center-align">
<h3>Tratamientos a tu medida</h3>
<h5 class="light grey-text text-lighten-3">Ortodocia a tus necesidades</h5>
<a href="#" class="btn btn-medium blue darken-1">Saber mas...</a>
</div>
</li>
</ul>
</div>
<!--Fin del Slider-->
<!--FIN DEL HEADER-->
<!--CUERPO-->
<!--Tratamietos-->
<section class="section section-tratamientos grey lighten-4" id="seccion-tratamientos">
<div class="container">
<div class="row">
<div class="col s12">
<div class="row">
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="img/rainier-ridao-720108-unsplash.jpg">
<span class="card-title">Ortodoncista</span>
<a class="btn-floating halfway-fab waves-effect waves-light blue"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<p>"¡Hola mi nombre es Julia!"</p>
</div>
</div>
</div>
<div class="col s12 m8">
<div class="card-panel hoverable indigo accent-1">
<h5>Ortodoncia</h5>
<span class="white-text valign-wrapper" id="parrafo">
La ortodoncia es la especialidad odontológica que se especializa en el tratamiento
de las alteraciones del desarrollo dental, trabajando entorno a tres áreas, el
diagnóstico, la prevención y el tratamiento, para corregir la posición de los
dientes y mandíbula.</span>
<div class="right-align"><a href="#" class="waves-effect waves-light btn blue">Reservar
cita</a></div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="img/rainier-ridao-720108-unsplash.jpg">
<span class="card-title">Ortodoncista</span>
<a class="btn-floating halfway-fab waves-effect waves-light blue"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<p>"¡Hola mi nombre es Julia!"</p>
</div>
</div>
</div>
<div class="col s12 m8">
<div class="card-panel hoverable indigo accent-1">
<h5>Ortodoncia</h5>
<span class="white-text valign-wrapper" id="parrafo">
La ortodoncia es la especialidad odontológica que se especializa en el tratamiento
de las alteraciones del desarrollo dental, trabajando entorno a tres áreas, el
diagnóstico, la prevención y el tratamiento, para corregir la posición de los
dientes y mandíbula.</span>
<div class="right-align"><a href="#" class="waves-effect waves-light btn blue">Reservar
cita</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Fin tratamientos-->
<!--FIN DEL CUERPO-->
<!--INICIO DEL FOOTER-->
<footer class="page-footer blue lighten-2">
<div class="container">
<div class="row">
<div class="col s12 m8 l6">
<h5 class="white-text">Primer Contenido del footer</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer
content.</p>
</div>
<div class="col s12 m4 l6">
<h5 class="white-text">Segundo contenido del footer</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer
content.</p>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2018 Copyright All Rights Reserved
<a class="grey-text text-lighten-4 right" href="#!">Mas links</a>
</div>
</div>
</footer>
<!--FIN DEL FOOTER-->
<!--<script src="js/jquery.min.js"></script>-->
<!--<script src="js/materialize.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/jquery.parallaxer.min.js""></script>
link
//para hacer el efecto sticky Header
$('.tarjetaPushpin').pushpin({
//top: 430, //94 ---Inicio
top: $('.tarjetaPushpin ').offset().top,
bottom: 100000, // --Final
offset: 0
});
//Inicializacion del header
$('.slider').slider({
full_width: true,
height: 230, // default - height : 400
interval: 8000, // default - interval: 6000
indicators: true
});
});
</script>