We Keep Coding

content shows off while scrolling in responsive hambuger responsive

I was finishing up creating this page using html and css after finishing up i was just checking the navigation menu in a mobile view and while scrolling down the menu the content of the page shows off and menu goes down and the content shows off
I want content not be shown while scrolling or not scrolling in the hamburger menu
code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
z-index: 9999;
/** ADDED **/
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
background-color: #2f2f42;
/** ADDED **/
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" />
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>

You could use JS to disable scroll when the menu shows up and enable when it's closed. Although, I don't understand why you wanted to use checkbox input for closing the menu. you could handle scrollbar like this
HTML
<label for="click" class="menu-btn" onclick={disableScroll()}>
<i class="fas fa-bars"></i>
</label>
<label for="click" class="close-btn" onclick={enableScroll()}>
<i class="fa-solid fa-xmark"></i>
</label>
Javascript
<script>
const disableScroll = () =>{
document.body.style.height = "100%";
document.body.style.overflow = "hidden";
document.querySelector("menu-btn").style.display = "none"
document.querySelector("close-btn").style.display = "block"
}
const enableScroll = () =>{
document.body.style.overflow = "auto";
document.querySelector("menu-btn").style.display = "block"
document.querySelector("close-btn").style.display = "none"
}
</script>

Burger menu doesn't display with CSS, JS and HTML

I ran into a problem displaying a burger menu for my website. I wanted it to appear on the top right corner but somehow the menu is invisible right now.
I leave my source codes so I appreciate it if any of you could advise me on this.
$(document).ready(function(){
$(".burger").on("click", function(){
$("nav li").toggleClass("open");
});
});
/* Header */
header {
position: fixed;
z-index: 100;
width: 100%;
border-bottom: solid 1px #c6c1c1;
background-color: white;
}
header .content {
display: flex;
align-items: center;
padding: 1.875rem;
}
header .site-logo {
flex: 1;
width: 60%
}
header nav ul {
display: flex;
}
ul {
list-style-type: none;
display: flex;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
nav li {
padding-left: 3.5rem;
}
nav li:last-child {
display: flex;
}
nav a {
vertical-align: bottom;
line-height: 1.6;
font-size: 1rem;
color: #de6cb6;
}
nav a:link {
color: red;
}
nav select {
display: none;
}
a:-webkit-any-link {
cursor: pointer;
}
header .icon {
width: 1rem;
padding-left: .75rem;
color: #de6cb6
}
header .mobile {
display: none;
}
#media only screen and (max-width: 1200px) {
nav li:last-child {
display: block;
}
header .content {
padding: 1rem 1rem;
}
}
#media only screen and (max-width: 1000px) {
header {
float: none;
}
header .desktop {
display: none;
}
header .mobile {
background: pink;
color: pink;
List-style: none;
clear: both;
}
header .mobile li {
display: inline-block;
margin: 10px;
}
header .mobile .burger {
width: 35px;
height: 5px;
background: pink;
margin: 6px 0;
}
#burger {
float: right;
visibility: visible;
margin: 5px;
}
header .content {
padding: .5rem 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Header -->
<header>
<div class="content" style="height: 60px;">
<img src="./resources/images/cropped_springtribelogo_notagline.png" style="height:60px;">
<nav class="desktop">
<ul>
<li>Impressum</li>
<li>EN</li>
<li><img class="icon" src="./resources/images/instagram (1.png"></li>
<li><img class="Linkedin" src="./resources/images/Linkedin_saturated_4.png" style="width: 20px; color: #de6cb6; margin-left: 8px;"></li>
</ul>
</nav>
<nav class="mobile">
<!-- Navigation Burger-->
<div id="burger" class="burger">
<div></div>
<div></div>
<div></div>
</div>
<br>
<li>Home</li>
<li>About</li>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</nav>
</div>
</header>

There's two issues in your code. Firstly the rules in the <1000px media query don't override the default display: none setting of the header .mobile element. Secondly you're applying the styling for the lines of the burger icon to the .burger div directly, instead of this child div within it. If you fix the following two issues, the code works correctly:
#media only screen and (max-width: 1000px) {
header .mobile {
/* other rules... */
background-color: transparent;
display: block;
}
/* OLD: header .mobile .burger { */
header .mobile .burger div {
width: 35px;
height: 5px;
background: pink;
margin: 6px 0;
}
Working example:
/* Header */
header {
position: fixed;
z-index: 100;
width: 100%;
border-bottom: solid 1px #c6c1c1;
background-color: white;
}
header .content {
display: flex;
align-items: center;
padding: 1.875rem;
}
header .site-logo {
flex: 1;
width: 60%
}
header nav ul {
display: flex;
}
ul {
list-style-type: none;
display: flex;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
nav li {
padding-left: 3.5rem;
}
nav li:last-child {
display: flex;
}
nav a {
vertical-align: bottom;
line-height: 1.6;
font-size: 1rem;
color: #de6cb6;
}
nav a:link {
color: red;
}
nav select {
display: none;
}
a:-webkit-any-link {
cursor: pointer;
}
header .icon {
width: 1rem;
padding-left: .75rem;
color: #de6cb6
}
header .mobile {
display: none;
}
#media only screen and (max-width: 1200px) {
nav li:last-child {
display: block;
}
header .content {
padding: 1rem 1rem;
}
}
#media only screen and (max-width: 1000px) {
header {
float: none;
}
header .desktop {
display: none;
}
header .mobile {
background-color: transparent;
color: pink;
List-style: none;
clear: both;
display: block;
}
header .mobile li {
display: inline-block;
margin: 10px;
}
header .mobile .burger div {
width: 35px;
height: 5px;
background: pink;
margin: 6px 0;
}
#burger {
float: right;
visibility: visible;
margin: 5px;
}
header .content {
padding: .5rem 0;
}
}
<header>
<div class="content" style="height: 60px;">
<img src="./resources/images/cropped_springtribelogo_notagline.png" style="height:60px;">
<nav class="desktop">
<ul>
<li>Impressum</li>
<li>EN</li>
<li>
<img class="icon" src="./resources/images/instagram (1.png">
</li>
<li>
<img class="Linkedin" src="./resources/images/Linkedin_saturated_4.png" style="width: 20px; color: #de6cb6; margin-left: 8px;">
</li>
</ul>
</nav>
<nav class="mobile">
<div id="burger" class="burger">
<div></div>
<div></div>
<div></div>
</div><br>
<ul>
<li>Home</li>
<li>About</li>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</nav>
</div>
</header>
As an aside, note that your HTML isn't valid as the li elements need to be children of a ul

Simple Modal won't show on click

I did have the modal working and showing when I press the button. However, now (not sure how I've done it) I cannot get the modal box to open.
I have my page laid out as an image and then the button below the image to open the modal.
This is my HTML...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://kit.fontawesome.com/454c24fdd9.js"></script>
<title>Elle and Belle Design</title>
</head>
<body>
<div class="logo">
<img src="logo.png" class="logoimg">
</div>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Information</li>
<li class="products">
Products
<div class="dropdown-content">
Headbands
Earrings
Other
</div></li>
<li>Contact Us</li>
</ul>
</nav>
<div class="header">
<h1>Elle and Belle Design</h1>
<h2>Bespoke Handmade Headbands and Accessories</h2>
</div>
</div>
<div class="mainbody">
<div class="sidebar">
<h3>Updates</h3>
</div>
<div class="section-1">
<img src="silverband.jpg" class="previewimg"><br>
<button class="headbutton">Preview</button>
<div id="headmodal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p7>Belle Band</p7><br>
<img src="silverband.jpg" class="headbands">
<img src="silverbandon.jpg" class="headbands">
<p6>£15</p6><br>
<p4>Our Belle Band is hand-crafted with love and care in both thick and thin sizes.</p4><br>
<p4>We use a range of small silver jewels incorporated with white pearls and flowers for that ultimate wedding look</p4>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("headmodal");
// Get the button that opens the modal
var btn = document.getElementById("headbutton");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
</div>
<div class="footer">
<div id="socialmedia">
<i class="fab fa-facebook-square fa-2x"><a style="padding-left: 15px;" href='#'></a></i>
<i class="fab fa-instagram fa-2x"><a style="padding-left: 15px;" href='#'></a></i>
<i class="fab fa-twitter-square fa-2x"><a style="padding-left: 15px;" href='#'></a></i>
</div>
<br>
<p3>Find Us on Social Media</p>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
#media screen and (max-width: 600px) {
.main-body {
flex-direction: column;
}
}
/* Fonts */
#font-face {
font-family: 'greatvibes';
src: local('greatvibes.otf');
src: url('greatvibes.otf');
format: ('opentype');
}
#font-face {
font-family: 'tenderness';
src: local('tenderness.otf');
src: url('tenderness.otf');
format: ('opentype');
}
/* Headings and Paragraphs */
h1 {
font-family: 'greatvibes';
font-size: 7vw;
font-weight: bold;
}
h2 {
font-family: 'greatvibes';
font-size: 3.5vw;
}
h3 {
font-family: 'greatvibes';
font-size: 2vw;
text-align: center;
}
h4 {
font-family: 'greatvibes';
font-size: 2vw;
text-align: center;
margin-bottom: 0;
}
p2 {
font-family: 'greatvibes';
font-size: 1.9vw;
}
p3 {
font-family: 'greatvibes';
font-size: 2vw;
}
p4 {
font-family: 'tenderness';
font-size: 1.5vw;
line-height: 2.5vw;
}
p5 {
font-family: 'tenderness';
font-size: 1.5vw;
line-height: 2.5vw;
}
p6 {
font-family: 'greatvibes';
font-size: 4vw;
}
p7 {
font-family: 'greatvibes';
font-size: 4vw;
}
/* Sections */
.header {
padding: 17vw;
text-align: center;
height: auto;
background-image: url("decorhands.jpg");
background-size: 100%;
}
body {
margin: 0;
padding: 0;
background:whitesmoke;
font-family: 'tenderness';
}
.mainbody {
display: flex;
flex-wrap: wrap;
}
.sidebar {
flex: 20%;
background-color: #FEDCD2;
min-height: 500px;
text-align: center;
padding: 1vw;
}
.section-1 {
flex: 80%;
background-color:whitesmoke;
}
.bands {
flex: 50%;
padding: 1em;
}
.footer {
padding: 20px;
text-align: center;
background: #bfd8d2;
min-height: 10vw;
}
.socialmedia {
display: flex;
align-items: flex-end;
}
.home {
width: 100%;
height: auto;
opacity: 0.7;
}
/* Navigation bar */
.main-nav {
display: flex;
position: fixed;
top: 0;
background-color: rgba(0, 0, 0, 0.35);
z-index: 0.9;
height: 5vw;
width: 100%;
}
.main-nav ul {
list-style-type: none;
margin: 0 0 0 20vw;
padding: 0;
overflow: visible;
top: 0;
width: 100%;
height: 5vw;
}
.main-nav ul li {
display: inline-block;
text-align: center;
margin-left: 2vw;
height: 5vw;
}
.main-nav li {
float: left;
height: 5vw;
}
.logoimg {
height: 5vw;
width: auto;
float: left;
position: fixed;
margin-left: 1vw;
z-index: 1;
}
.main-nav li a, .dropdown {
display: block;
padding: 1.2em 2.2em;
text-decoration: none;
color: whitesmoke;
text-align: center;
font-family: 'tenderness';
font-size: 1.5vw;
height: 5vw;
border-bottom: 0.3vw solid transparent;
}
.main-nav li a:after {
display: block;
content: '';
border-bottom: 0.3vw solid whitesmoke;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
height: 1.2vw;
min-width: 6vw;
}
.main-nav li a:hover:after {
height: 1.2vw;
transform: scaleX(1);
}
.main-nav a:active {
border-bottom: 1vw solid whitesmoke;
}
li.products {
display: inline-block;
height: 5vw;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(0, 0, 0, 0.35);
min-width: 8vw;
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
height: 5vw;
}
.products:hover .dropdown-content {
display: block;
}
/* Contact Form */
.contact-header {
margin-top: 5px;
}
.contact-header h3 {
font-size: 2.5vw;
text-align: center;
}
.contact-form {
text-align: center;
}
.form-control {
width: 80%;
background: transparent;
border: none;
outline: none;
color: black;
font-size: 1.2vw;
border-bottom: 0.2vw solid #DF744A;
margin-bottom: 1vw;
padding: 0.5vw;
}
form .submit {
background-color: #DF744A;
border-color: transparent;
color: whitesmoke;
font-size: 1.5vw;
text-align: center;
}
form .submit:hover {
background-color: rgb(209, 84, 35);
cursor: pointer;
}
/*Headband Modal*/
.modal {
display: none;
position: fixed;
z-index: 1;
padding: 10vw;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.headbands {
height: auto;
width: 30vw;
}
.previewimg {
width: 20vw;
height: auto;
margin: 1vw;
}
I am not sure why all of a sudden it wont let me open the modal.
Please help!
Thanks
Mary

As I can see, in JS code you are trying to get the button in a wrong way.
getElementById will not work in that case because your button does not have an id attribute
Maybe try to grab the button like so:
document.querySelector(".headbutton");
Let me know if it solved the issue.
For more information about querySelector see this link
and also see this link for querySelectorAll

It is just for a simple reason and that is you forget to get btn in the right way. You want to get your button with getElementById but there is no element with this id in your page and that is the error part!
So you can change the class attribute to id or you can get your button with getElementByClassName in your javascript code.
I hope this helps :)

You can change your btn.onclick function to a regular function such as:
function buttonClick() {
modal.style.display = "block";
}
and call the onclick method in the button tag:
<button class="headbutton" onClick="buttonClick()">Preview</button>
Working jsFiddle: https://jsfiddle.net/t29qh6f3/
I did this for your span.onclick function as well.
This should make your modal appear again. Hope this helps.

About JQuery conditional statement

if press the button, id #footer gets padding-top as much as class .box's outerHeight. When I press the button again, #footer's padding-top must be "0". but now #footer's padding-top doesn't change.
I tried many codes that ("padding-top",null), ("padding-top",0), $("button").toggle(function(){}); etc..
$(document).ready(function() {
$("button").click(function() {
var boxHeight = $(".box").stop().fadeToggle(10).outerHeight();
$("#footer").css("padding-top", boxHeight);
});
});
#charset "utf-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
ol {
list-style: none;
}
a {
color: #000;
text-decoration: none;
}
button {
background: transparent;
cursor: pointer;
}
img,
button,
input {
border: 0;
}
html {
-webkit-text-size-adjust: none;
}
body {
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
letter-spacing: 0.5px;
}
html,
body {
height: 100%;
}
/* layout */
.layout {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.layout:after {
display: block;
clear: both;
content: "";
}
/* footer */
#footer {
position: relative;
font-size: 14px;
border-top: 1px solid #0067ac;
background-color: #e4e4e4;
color: #6f6f6f;
letter-spacing: 0;
}
#footer .layout {
position: static;
padding: 50px 0;
font-size: 0;
}
#footer .wrap-btn {
float: right;
}
#footer .wrap-btn button {
position: relative;
width: 121px;
height: 38px;
margin-right: 10px;
padding-right: 10px;
font-size: 14px;
}
#footer .wrap-btn button:before {
position: absolute;
top: 16px;
right: 7px;
width: 11px;
height: 6px;
background: url(../img/ir-common.png) no-repeat -115px -146px;
content: "";
}
#footer .wrap-btn button,
#btn-top {
display: inline-block;
font-size: 12px;
border: 1px solid #0067ac;
color: #6f6f6f;
}
#footer .wrap-btn .box {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
padding: 30px;
border-bottom: 1px solid #0067ac;
font-size: 16px;
background-color: #f8f8f8;
}
#footer .wrap-btn .box ul {
max-width: 1200px;
margin: 0 auto;
}
#footer .wrap-btn .box ul:after {
display: block;
clear: both;
content: "";
}
#footer .wrap-btn .box ul li {
float: left;
width: 20%;
margin-top: 10px;
}
#footer .wrap-btn .box ul li a {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<footer id="footer">
<div class="layout">
<div class="wrap-btn">
<button type="button">button</button>
<div class="box">
<ul>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
</ul>
</div>
</div>
</div>
</footer>

You could check if the .box is visible, and if not set the padding-top to 0;
$(document).ready(function() {
$("button").click(function() {
var v = $(".box").is(":visible");
var boxHeight = $(".box").stop().fadeToggle(10).outerHeight();
$("#footer").css("padding-top", v == false ? boxHeight : 0);
});
});
Demo
$(document).ready(function() {
$("button").click(function() {
var v = $(".box").is(":visible");
var boxHeight = $(".box").stop().fadeToggle(10).outerHeight();
$("#footer").css("padding-top", v == false ? boxHeight : 0);
});
});
#charset "utf-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
ol {
list-style: none;
}
a {
color: #000;
text-decoration: none;
}
button {
background: transparent;
cursor: pointer;
}
img,
button,
input {
border: 0;
}
html {
-webkit-text-size-adjust: none;
}
body {
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
letter-spacing: 0.5px;
}
html,
body {
height: 100%;
}
/* layout */
.layout {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.layout:after {
display: block;
clear: both;
content: "";
}
/* footer */
#footer {
position: relative;
font-size: 14px;
border-top: 1px solid #0067ac;
background-color: #e4e4e4;
color: #6f6f6f;
letter-spacing: 0;
}
#footer .layout {
position: static;
padding: 50px 0;
font-size: 0;
}
#footer .wrap-btn {
float: right;
}
#footer .wrap-btn button {
position: relative;
width: 121px;
height: 38px;
margin-right: 10px;
padding-right: 10px;
font-size: 14px;
}
#footer .wrap-btn button:before {
position: absolute;
top: 16px;
right: 7px;
width: 11px;
height: 6px;
background: url(../img/ir-common.png) no-repeat -115px -146px;
content: "";
}
#footer .wrap-btn button,
#btn-top {
display: inline-block;
font-size: 12px;
border: 1px solid #0067ac;
color: #6f6f6f;
}
#footer .wrap-btn .box {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
padding: 30px;
border-bottom: 1px solid #0067ac;
font-size: 16px;
background-color: #f8f8f8;
}
#footer .wrap-btn .box ul {
max-width: 1200px;
margin: 0 auto;
}
#footer .wrap-btn .box ul:after {
display: block;
clear: both;
content: "";
}
#footer .wrap-btn .box ul li {
float: left;
width: 20%;
margin-top: 10px;
}
#footer .wrap-btn .box ul li a {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<footer id="footer">
<div class="layout">
<div class="wrap-btn">
<button type="button">button</button>
<div class="box">
<ul>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
</ul>
</div>
</div>
</div>
</footer>

You need to track if your footer is open or not in order to achieve what you are trying to do.
Something like :
$(document).ready(function(){
let footerOpen = false;
$("button").click(function(){
var boxHeight = $(".box").stop().fadeToggle(10).outerHeight();
if(!footerOpen) {
$("#footer").css("padding-top",boxHeight);
footerOpen = true;
} else {
$("#footer").css("padding-top", 0);
footerOpen = false;
}
});
});
Here is a working codepen: https://codepen.io/antonbks/pen/jONMNLB

Javascript dropdown menu not working

I'm trying to create dropdown menu that will open and collapse when the "mobile-nav" button gets clicked.
Please see this video or website as examples of the intended behavior:
https://www.youtube.com/watch?v=ozOSV75DgzU
http://travisneilson.com/
function mobileNav() {
$('.mobile-nav-toggle').on('click', function() {
var status = $(this).hasClass('is-open');
if (status) {
$('.mobile-nav-toggle, .mobile-nav').removeClass('is-open');
} else {
$('.mobile-nav-toggle, .mobile-nav').addClass('is-open');
}
});
}
/* ------------------------------------------ */
/* BASIC SETUP */
/* ------------------------------------------ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
text-align: justify color: #fff;
font-family: 'Lato', 'arial', sans-serif;
font-size: 19px;
font-weight: 400;
text-rendering: optimizeLegibility;
background: #333;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
/* ------------------------------------------ */
/* REUSABLE COMPONENTS */
/* ------------------------------------------ */
.row-basic {
max-width: 1216px;
}
.main-container {
max-width: 1216px;
margin: 0 auto;
}
/* ------------------------------------------ */
/* HEADER */
/* ------------------------------------------ */
.mobile-nav {
display: ;
position: ;
width: 1216px;
background: white;
padding: 31px 0px 21px;
transform: translateY(-100%);
transition: all 0.3s ease-in-out
}
.mobile-nav.is-open {
display: block;
transform: translateY(0%);
}
.mobile-nav ul {
list-style: none;
}
.mobile-nav ul li {
text-align: center;
margin-bottom: 10px;
}
.mobile-nav ul li a:link,
.mobile-nav ul li a:visited {
color: #999;
text-decoration: none;
text-transform: uppercase;
}
header {
background-color: rgba(246, 149, 149, 0.06);
height: 81px;
width: auto;
padding-top: 24px;
margin-top: 26px;
margin-bottom: 0px;
display: flex;
justify-content: space-between;
}
/* ----- NAVIGATION -----*/
nav {
display: flex;
align-items: center;
}
nav ul {
display: flex;
}
.main-nav {
list-style: none;
}
.main-nav li {
display: inline-block;
line-height: 31px;
border-right: 1px solid rgba(255, 255, 255, 0.24);
padding-right: 9px;
padding-left: 9px;
margin-right: 0px;
width: auto;
}
.main-nav li:last-child {
border-right: hidden;
margin-right: 31px;
}
.main-nav li a:link,
.main-nav li a:visited {
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
.user-tools {
display: flex;
align-items: center;
}
.user-tools:focus {
outline: none;
}
/* ----- MENU BUTTON -----*/
.mobile-nav-toggle {
height: 50px;
width: 35px;
margin-right: 31px;
display: flex;
align-items: center;
cursor: pointer;
}
.mobile-nav-toggle span,
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
border-radius: 2px;
content: "";
display: block;
height: 6px;
width: 100%;
background: #fff;
position: relative;
}
.mobile-nav-toggle span::before {
top: 11px;
}
.mobile-nav-toggle span::after {
bottom: 17px;
}
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
<script src="resources/js/functions.js"></script>
</head>
<body>
<div class="main-container">
<div class="mobile-nav is-open">
<ul>
<li>Menu
</li>
<li>Services
</li>
<li>Gallery
</li>
<li>About Me
</li>
</ul>
</div>
<header class="row-basic">
<nav>
<ul class="main-nav">
<li>Menu
</li>
<li>Services
</li>
<li>Gallery
</li>
<li>About Me
</li>
</ul>
</nav>
<div class="user-tools">
<div class="mobile-nav-toggle">
<span></span>
</div>
</div>
</header>
</div>
</body>
</html>

You have to add link to jQuery script.
Delete declaration function mobileNav() { and it closing braket }.
$('.mobile-nav-toggle').on('click', function() {
var status = $(this).hasClass('is-open');
if (status) {
$('.mobile-nav-toggle, .mobile-nav').removeClass('is-open');
} else {
$('.mobile-nav-toggle, .mobile-nav').addClass('is-open');
}
});
Here is example of working code https://jsfiddle.net/efjz40ob/