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";
}
}
I have taken the liberty of changing it
nav
tonavbar
, to see if it convinces you more, and also because it already contemplates the use of the classnavbar-toggler
and makes the default responsive theme better.Note that I have discarded all your CSS and javascript, since bootstrap already handles most of what you want, and what I show you here is only so that you understand that the functionality that I think you say works badly, if you do it with navbar it works better.
As I've said in the comments, avoid using custom CSS that might interfere with normal bootstrap behavior . Instead it looks for the bootstrap classes that are already prepared for it. In my opinion, if you want to add custom CSS, it should be only for appearance issues (colors, borders, etc), but not for the location of the elements (position, margin, etc), because they can cause you many problems, as already it's happening to you
Try this to see if it works as a base for you to later make it up with CSS to your liking, but as I have explained before, that is, without wanting to go into tweaks that affect bootstrap: