Good morning, I want to make a floating navigation bar at the top, and when I reach a low resolution (600) apply media queries and hide the options inside a bar icon or inside the logo. I manage to mount everything, but when I scroll down the page, and click on the bar icon the navbar goes up to the top of the page. when should I show the options without uploading
I appreciate if you could tell me what I need to add to the code to make it work or if you have more effective ideas, I would appreciate your wisdom. Thank you
https://jsfiddle.net/Dottemo/9u7dnLgt/5/
<nav class="wow animated fadeInDown" data-wow-delay="0s">
<ul class="">
<div class="topmenu" id="myTopnav">
<img class="" style="float:left; padding-right: 100px; " src="../img/logo.png">
<a class="home" href="#home">Inicio</a>
<a href="#contact">Sobre</a>
<a href="#about">Trabajo</a>
<a href="#price">Precio</a>
<a class="contact" href="#contact">Contacto</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars fa-2x"></i></a>
</div>
</ul>
</nav>
/** Topmenu Style **/
.topmenu {
overflow: hidden;
background: white;
margin: 23px;
width: auto;
position: fixed;
padding: 11px;
border-radius: 50px;
box-shadow: 0 0px 14px -7px #065158;
z-index: 10;
}
.topmenu a {
float: left;
display: block;
color: #808080;
font-weight: 400;
transition: 0.2s;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 10px;
}
.topmenu a:hover {
color: #15a5b2;
transition: 0.2s;
}
.topmenu .icon {
display: none;
}
.contact{
margin-right: 100px;
}
.active{
margin-right: 10px;
}
/**** Media Querys ***/
@media screen and (max-width: 600px) {
.topmenu a:not(:first-child) {display: none;}
.topmenu a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topmenu.responsive {position: relative;}
.topmenu.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topmenu.responsive a {
float: none;
display: block;
text-align: left;
}
}
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topmenu") {
x.className += " responsive";
} else {
x.className = "topmenu";
}
}