CSS: Possibly Collapsed Margins? - html

Question

I have tried applying a Overflow: hidden/auto to varios classes of CSS.
I have tried applying a Clear: both to various CSS sections as well, so far no go.
I am just unsure on how to fix this.
https://codepen.io/Tsukiyono/pen/KXLZbP
If you change the Codepen to a mobile size, the hamburger menu pops up, when clicked there is a small grey box that should cover the whole screen, but it only goes about 50px down or so. It used to work correctly, but I made a change at some point and something broke and now I cant seem to fix it.
If one of the above options is the correct fix, could someone help me figure out the correct CSS (or combination of CSS) that I can add it to to fix my issue?
//Variables
var overlay = document.querySelector(".fa-bars");
var times = document.querySelector(".fa-times");
var menuSelect = document.querySelector("#hiddenNav")
var quoteFade = document.querySelector(".toggleOff")
var navScroll = document.querySelector("#navbar");
//Hamburger Menu Display Overlay
overlay.addEventListener("click", function(){
if (times.classList.contains("closed")){
//toggle Display property for hiddenNav
menuSelect.classList.add("toggle");
//FadeOut Hamburger
overlay.classList.add("closed");
//FadeIn X Menu
times.classList.remove("closed");
}
})
//Closes Out Overlay Display Menu
times.addEventListener("click", function(){
if (overlay.classList.contains("closed")){
//toggle Display Property for hiddenNav
menuSelect.classList.remove("toggle");
//FadeIn Hamburger
overlay.classList.remove("closed");
//FadOut X Menu
times.classList.add("closed");
}
})
//Loads text after the page loads with transition
function onStart() {
quoteFade.classList.add("toggleOn");
quoteFade.classList.remove("toggleOff");
}
window.onload = onStart;
//Change Navbar Opacity on Scroll
window.onscroll = function (){
if (document.body.scrollTop >= 100){
navScroll.classList.add("colored");
navScroll.classList.remove("transparent");
alert("working");
}
else {
navScroll.classList.add("transparent");
navScroll.classList.remove("colored");
}
};
/* Simple Resets */
html, body {
background-color: #fff;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Raleway', sans-serif;
}
/*------------------------------------------------------------------
[1. NavBar - Primary]
*/
div.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
}
nav {
float: left;
width: 100%;
outline: none;
position: fixed;
}
/* used to make Navbar change color on Scroll */
nav.transparent {
background-color: transparent;
}
nav.colored {
background-color: white;
transition: 1s;
}
nav h1 {
padding-left: .5em;
color: #000;
text-transform: uppercase;
float: left;
font-size: 1.5em;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 10px;
float: right;
}
nav ul li {
display: inline-block;
}
nav ul li:hover {
font-weight: bold;
text-decoration: underline;
transition: .7s;
}
nav ul li a {
padding: 1em;
color: #000;
display: block;
text-transform: uppercase;
text-decoration: none;
}
i.fa-bars {
color: blue;
float: right;
font-size: 28px;
padding: 5px;
margin-top: 20px;
display: none;
}
/*------------------------------------------------------------------
[1.5 NavBar - Hidden Overlay]
*/
div.overlay {
background-color: rgba(0,0,0,0.7);
position: absolute;
width: 100%;
height: 100%;
display: none;
transition: .7s;
}
/* Allows Hidden Nav to be displayed */
div.overlay.toggle {
display: block;
}
i.fa-times {
color: #fff;
font-size: 2.5em;
padding: 5px;
position: absolute;
right: 30px;
top: 20px;
display: block;
}
/* Shuts down the FA Icons on click with JS */
i.fa-bars.closed,
i.fa-times.closed {
display: none;
transition: .7s;
}
div.overlay ul{
padding: 0;
margin: 100px 0 0 0;
display: block;
width: 100%;
text-align: center;
}
div.overlay ul li {
display: block;
}
div.overlay ul li a {
font-size: 1.25em;
padding: 1em;
color: #fff;
display: block;
text-transform: uppercase;
text-decoration: none;
}
/*------------------------------------------------------------------
[2 Hero Image]
*/
.hero-section {
width: 100%;
height: 50em;
margin: auto;
background: url("img/alexandru-tudorache-17852.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
}
/*------------------------------------------------------------------
[2.5 Quote Text]
*/
#quoteBox .container-fluid {
padding-top: 9em;
text-align: center;
}
.toggleOn {
opacity: 1;
transition: 3s;
}
.toggleOff{
opacity: 0;
}
#content {
height: 35em;
}
p#quote {
max-width: 25em;
color: white;
text-shadow: 0 0 3px #000;
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
letter-spacing: 0.1em;
text-align: center;
margin: 40px auto;
text-transform: lowercase;
line-height: 145%;
font-size: 2.1em;
font-variant: small-caps;
}
/*------------------------------------------------------------------
[9 Footer]
*/
footer {
background-color: #000;
height: 6em;
width: 100%;
margin: 0;
padding: 0;
}
footer p {
margin-bottom: .5em;
}
.social-media-contact {
color: white;
text-align: center;
}
.social-media-contact i {
padding: 0 .5em;
margin: 0px 10px;
}
.social-media-contact .fa {
font-size: 1.5em;
}
.footerNav ul {
text-transform: uppercase;
list-style-type: none;
margin-right: 3em;
}
.footerNav ul li {
display: inline;
color: #fff;
}
.footerNav ul li a {
color: #fff;
padding: .4em;
text-decoration: none;
}
.footerNav li:not(:first-child):before {
content: "|";
padding: .3em;
}
/*------------------------------------------------------------------
[10 Media Queries]
*/
/* Navbar */
#media all and (max-width: 768px){
nav ul {
display: none;
}
i.fa-bars {
display: block;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marlee Branding Site</title>
<!-- Google Fonts - RaleWay -->
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
<!--Font Awesome -->
<link rel="stylesheet" href="assets/fa/css/font-awesome.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navbar -->
<nav class="transparent" id="navbar">
<!-- Collapsed Navbar -->
<div class="overlay" id="hiddenNav">
<div class="container">
<i class="fa fa-times closed" aria-hidden="true"></i>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Now</li>
<li>Blog</li>
<li>Contact</li>
</ul> <!-- End Collapse Nav -->
</div>
</div>
<!-- Standard Navbar -->
<div class="container" id="navbar">
<h1>Logo</h1>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Now</li>
<li>Blog</li>
<li>Contact</li>
</ul> <!-- End Nav -->
<i class="fa fa-bars" aria-hidden="true"></i>
</div> <!-- End Container -->
</nav><!-- End Nav -->
<!-- Hero Image and Quote -->
<section class="hero-section">
<div class="hero-image">
<div id="quoteBox">
<div class="container-fluid full toggleOff">
<div id="content">
<p id="quote">"Action is the foundational key to all success"
<br> — Pablo Picasso</p>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="social-media-contact container">
<p>Connect With Me</p>
<i class="fa fa-facebook-official" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
<div class="footerNav">
<ul>
<li>Home</li>
<li>About</li>
<li>Now</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</footer>
<!-- Custom JS -->
<script src="scripts.js"></script>
</body>
</html>

Answer 1

This is because of this CSS rule:
div.overlay {
height: 100%;
}
Removing this makes it work:
Note: It's not because of overflow, but just limited in height.
A better alternative would be using min-height (thanks to G-Cyr):
div.overlay {
min-height: 100%;
}