I'm having problems with my nav. I was following a tutorial on how to make the navbar responsive and disappear on the way out of the top. But its drop-down menu does not work, I tried to edit the js class by running this function and no use, I broke my HTML page several times trying to do this. here is the code:
.logo{
position:fixed;
float:left;
margin: 16px 36px;
color: #fff;
font-weight:bold;
font-size: 24px;
}
.preheader{
position:fixed;
width:100%;
}
.preheader ul{
list-style:none;
background: rgba (0,0,0,0);
overflow:hidden;
color:#fff;
padding: 0;
text-align:center;
margin 0;
transition: 1s;
}
.preheader.black ul{
background: #000;
}
.preheader ul li{
display: inline-block;
padding: 20px;
}
.preheader ul li a{
text-decoration: none;
color:#fff;
font-size:20px;
}
.menu-icon{
width:100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
display:none;
}
@media(max-width:580px){
.logo{
position: fixed;
top: 0;
margin-top:16px;
}
.preheader ul{
max-height:0px;
background: #000;
}
.preheader.black ul{
background: #000;
}
.showing{
max-height: 20em;
}
.preheader ul li{
box-sizing:border-box;
width:100%;
padding: 24px 0;
text-align: center;
}
.menu-icon{
display:block;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="preheader">
<div class="wrapper">
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Plug | Seu celular na moda
</div>
<div class="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".menu-icon").on("click", function(){
$(".preheader ul").toggleClass("showing");
});
});
$(window).on("scroll", function(){
if($(window).scrollTop()){
$('.preheader').addClass('black');
}
else{
$('.preheader').removeClass('black');
}
});
</script>The problem is that when I am in mobile-view, navbar does not add up as in the case of the desktop and as I said before the dropdown does not work as much as mobile as desktop.