My mobile navigation bar on CSS is not functioning properly. It does not cover 100% width, the dropdown menu text is not centered, and the menu stays on screen after clicking a link.
Is there anyone who can help me resolve this issue?
To view the code snippet, visit: https://jsfiddle.net/wepywurp/
<body>
<div class="nav animated slideInDown">
<img src="img/hamburger.png" alt="" class="hamburger">
<div class="logo">
<h1>STEN</h1>
</div>
<ul>
<li><a href="#home">HOME</a></li>
<li>
<a href="#">PAGE</a>
<i class="fa fa-angle-down" aria-hidden="true"></i>
<ul>
<li><a href="#">DROPDOWN</a></li>
<li><a href="#">DROPDOWN</a></li>
</ul>
</li>
<li><a href="#aboutme">ABOUT ME</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#">PAGE</a></li>
</ul>
</div>
<div id="landing" class="landing animated fadeIn">
<div class="container">
<h1>STEN</h1>
<hr>
<p>I'M THE</p>
<h2>NEXT GENERATION</h2>
<button><a href="#aboutme">LEARN MORE</a></button>
<button><a href="#">PLANS</a></button>
</div>
<a href="#aboutme"><i class="fa fa-angle-double-down scroll" aria-hidden="true"></i></a>
</div>
<div class="main-content-wrapper">
<div id="aboutme" class="about-me">
<h1>ABOUT ME</h1>
<hr>
<div class="section">
<h2>WHO <span>AM I</span>?</h2>
<p>
Sed ullamcorper vestibulum nulla et aliquam. Nullam in porta arcu, in tincidunt felis. Aliquam vestibulum quam quis rutrum pellentesque.
<br><br>
Ut cursus congue sem nec vulputate. In quis dictum lacus, in ornare ante. Maecenas mattis enim id est auctor, vitae semper sapien pharetra. Vivamus dapibus nulla ut mattis lacinia.
</p>
</div>
<div class="section">
<h2>WHAT I'M <span>GOOD</span> AT</h2>
<p>
Things that I'm good at and things I'm still improving upon.
</p>
...
@media only screen and (max-width: 850px){
.up {
margin-right: 8px;
}
.nav .hamburger {
height: 6vh;
width: 6vh;
display: inline-block;
float: left;
margin: 2vh 0 0 2vh;
}
.nav .logo {
position: relative;
margin-left: calc(50% - 12.5vh);
}
.nav > ul {
display: none;
float: none;
padding-top: 10vh;
}
.nav .hamburger:hover ~ ul {
display: block;
width: 100%;
margin: 0;
}
.nav li:hover > ul {
display: block;
position: relative;
}
.nav > ul:hover {
display: block;
width: 100%;
}
.nav ul:hover li {
width: 100%;
padding: 0;
}
.nav > ul > li {
display: block;
background-color: #F2F2F2;
}
}