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>

Why won't my flexbox navbar align correctly?

Essentially I want the menu to display as it is (column), but underneath the navigation bar rather than positioning itself between the logo/hamburger.
The issue as far as I am aware is that the menu when within the media query breakpoint is still within the initial flexbox container it was prior to media query. I also am yet to style the navigation bar fully so the empty classes won't be empty forever.
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap');
#import url('https://fonts.cdnfonts.com/css/01-digitall');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
}
body {
background: #ffffff;
font-family: 'Quicksand', sans-serif;
}
.container {
max-width: 1250px;
margin: 0 auto;
padding: 0;
}
nav {
width: 100%;
height: 100px;
background: silver;
}
nav .container {
display: flex;
justify-content: space-between;
height: 100%;
padding: 10px;
}
.logo {
font-family: '01 Digitall';
font-size: 40px;
text-transform: uppercase;
display: flex;
height: 100%;
align-items: center;
}
.logo .black {
color: #000000;
}
.logo .red {
color: #ff0000;
}
.nav-menu {
display: flex;
height: 100%;
align-items: center;
display: none;
}
nav ul {
display: flex;
height: 100%;
align-items: center;
}
nav li {}
nav a {
color: #000000;
}
#media (max-width: 768px) {
nav {}
.logo {}
.nav-menu {
display: flex;
}
nav ul {
flex-direction: column;
position: absolute;
width: 100%;
}
nav li {}
nav a {
color: red;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class="container">
<div class="logo">
<span class="black">Test</span>
<span class="red">Website</span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Shop</li>
<li>Contact</li>
</ul>
<div class="nav-menu">
<i class="fa-solid fa-bars"></i>
</div>
</div>
</nav>
I decided to lead with mobile-first, still learning and getting to grips with flex box.

Your issue is mostly with the fundamentals of absolute positioning. Such elements are positioned with respect to the nearest non-static ancestor, so I've put relative position on the parent. Then, 100% width is problematic if you want to align the menu under the button. I've also set the right value to zero to get it over to the side.
I'm guessing at what you want to some extent. Please provide more detail if I'm off the mark.
Scroll the CSS panel down to see change markers.
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap');
#import url('https://fonts.cdnfonts.com/css/01-digitall');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
}
body {
background: #ffffff;
font-family: 'Quicksand', sans-serif;
}
.container {
max-width: 1250px;
margin: 0 auto;
padding: 0;
}
nav {
width: 100%;
height: 100px;
background: silver;
}
nav .container {
display: flex;
justify-content: space-between;
height: 100%;
padding: 10px;
}
.logo {
font-family: '01 Digitall';
font-size: 40px;
text-transform: uppercase;
display: flex;
height: 100%;
align-items: center;
}
.logo .black {
color: #000000;
}
.logo .red {
color: #ff0000;
}
.nav-menu {
display: flex;
height: 100%;
align-items: center;
display: none;
}
nav ul {
display: flex;
height: 100%;
align-items: center;
}
nav li {}
nav a {
color: #000000;
}
#media (max-width: 768px) {
nav {
position: relative; /* <------------------------- HERE */
}
.logo {}
.nav-menu {
display: flex;
}
nav ul {
flex-direction: column;
position: absolute;
right: 0; /* <------------------------- HERE */
/* width: 100%; */ /* <------------------------- HERE */
top: 100%; /* <------------------------- HERE */
}
nav li {}
nav a {
color: red;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class="container">
<div class="logo">
<span class="black">Test</span>
<span class="red">Website</span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Shop</li>
<li>Contact</li>
</ul>
<div class="nav-menu">
<i class="fa-solid fa-bars"></i>
</div>
</div>
</nav>

Try it using JS.
css:
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap');
#import url('https://fonts.cdnfonts.com/css/01-digitall');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
}
body {
background: #ffffff;
font-family: 'Quicksand', sans-serif;
}
.container {
max-width: 1250px;
margin: 0 auto;
padding: 0;
}
nav {
width: 100%;
height: 100px;
background: silver;
}
nav .container {
display: flex;
justify-content: space-between;
height: 100%;
padding: 10px;
}
.logo {
font-family: '01 Digitall';
font-size: 40px;
text-transform: uppercase;
display: flex;
height: 100%;
align-items: center;
}
.logo .black {
color: #000000;
}
.logo .red {
color: #ff0000;
}
.nav-menu {
height: 100%;
align-items: center;
display: none;
}
nav ul {
display: inline-flex;
height: 100%;
align-items: center;
}
nav a {
color: #000000;
}
#media (max-width: 768px) {
nav {}
.logo {}
.nav-menu {
display: flex;
}
nav ul {
flex-direction: column;
position: relative;
width: 100%;
display: none;
top: 100px;
right: 15%
}
nav li {}
nav a {
color: red;
}
}
js:
const links = document.querySelector("nav ul")
const navMenu = document.querySelector(".nav-menu")
if (window.matchMedia("(max-width: 768px)").matches) {
}
let linksOpen = false
console.log("Start: links is closed")
navMenu.addEventListener("click", () => {
if (linksOpen === false) {
links.style.display = "inline-flex"
linksOpen = true
console.log("links is open")
} else {
links.style.display = "none"
linksOpen = false
console.log("links is closed")
}
})

When you set position: absolute, the element will stay in the same position it would have been if it hasn't been positioned. In this case, if it wasn't for that property, the menu would have been between the logo and the hamburger item, since they're all inside a flex container.
When you use absolute positioning, you usually want to set top, left or similar properties to adjust its position.
In your situation, one quick way to put it below the header would be to:
Set the container (".container") to position: relative. This way, when we're refering "100%" in the next rule, we'll be considering the size of the container and not the whole document.
Add to the the menu (".container > ul") the following properties:
top: 100%;
left: 0px;
This will position the menu right below the header.
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap');
#import url('https://fonts.cdnfonts.com/css/01-digitall');
/* EDITED CSS ARE IN THE MEDIA QUERY BELOW */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
}
body {
background: #ffffff;
font-family: 'Quicksand', sans-serif;
}
.container {
max-width: 1250px;
margin: 0 auto;
padding: 0;
}
nav {
width: 100%;
height: 100px;
background: silver;
}
nav .container {
display: flex;
justify-content: space-between;
height: 100%;
padding: 10px;
}
.logo {
font-family: '01 Digitall';
font-size: 40px;
text-transform: uppercase;
display: flex;
height: 100%;
align-items: center;
}
.logo .black {
color: #000000;
}
.logo .red {
color: #ff0000;
}
.nav-menu {
display: flex;
height: 100%;
align-items: center;
display: none;
}
nav ul {
display: flex;
height: 100%;
align-items: center;
}
nav li {}
nav a {
color: #000000;
}
#media (max-width: 768px) {
/* EDITED CSS */
.container {
position: relative;
}
.container > ul {
top: 100%;
left: 0;
}
/* END EDITED CSS */
nav {}
.logo {}
.nav-menu {
display: flex;
}
nav ul {
flex-direction: column;
position: absolute;
width: 100%;
}
nav li {}
nav a {
color: red;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class="container">
<div class="logo">
<span class="black">Test</span>
<span class="red">Website</span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Shop</li>
<li>Contact</li>
</ul>
<div class="nav-menu">
<i class="fa-solid fa-bars"></i>
</div>
</div>
</nav>

Mobile nav has weird transitions in jQuery, and not displaying correctly

I have created a template with a horizontal navigation in desktop, and a vertical navigation in mobile. I am using one nav list and changing the styling of it for desktop to mobile.
The thing is, the jQuery that I have given it adds some strange transitions to it that I want removed. A fade in/fade out of the text and the sidebar and a weird slide in/slide out effect.
What I am trying to achieve is to make the mobile nav slide in/slide out with the width intact, with no fade effects. I think the toggle() class has something to do with it, but Im not sure.
Also, when you open then click the hamburger to open then close the mobile nav, then go to view the desktop mode, the desktop nav is gone also until you refresh the page.
Any help would be great. Thanks.
$('.toggle-menu').click(function() {
$('nav').toggle("nav");
});
:root {
--black: #212121;
--grey: #ccc;
--light-grey: #eee;
--grey-opacity: #ccc, 0.2;
--gutter: 30px;
}
html,
body {
min-height: 100%;
}
html {
box-sizing: border-box;
background-color: var(--grey);
}
body {
font-family: 'Poppins', sans-serif;
font-size: 14px;
line-height: 1.3;
color: var(black);
margin: 0;
}
a {
text-decoration: none;
color: var(--black);
}
a:hover,
a:focus {
color: var(--black);
}
ul {
padding: 0;
}
ul li {
display: inline;
list-style-type: none;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "header" "aside content" "overview overview" "footer footer";
}
.header-skin {
background-color: rgba(255, 255, 255, 0.1);
}
header {
grid-area: header;
display: flex;
justify-content: space-between;
padding: var(--gutter) 15px;
max-width: 1200px;
margin: 0 auto;
}
.toggle-menu span {
width: 20px;
height: 2px;
margin-bottom: 4px;
border-radius: 50px;
background: var(--black);
display: block;
}
#media (min-width: 839px) {
.toggle-menu {
display: none;
}
nav ul {
margin: 0;
}
nav ul li {
text-transform: capitalize;
padding-left: 20px;
}
nav ul li a {
position: relative;
}
nav ul li a.active {
color: var(--black);
font-weight: 700;
}
nav ul li a.active::after {
content: ' ';
width: 100%;
height: 2px;
display: block;
position: absolute;
left: 0;
bottom: -4px;
background-color: var(--black);
}
nav ul li:nth-child(4n) {
margin-right: 200px;
}
}
#media (max-width: 840px) {
nav {
height: 100%;
position: fixed;
background-color: rgba(255, 255, 255, 0.1);
left: 0;
top: 78px;
width: 300px;
margin-right: -300px;
display: none;
}
nav ul {
margin: 0;
padding: 40px 0 0 40px;
display: flex;
flex-direction: column;
}
nav ul li {
text-transform: capitalize;
padding-bottom: 40px;
}
nav ul li a {
position: relative;
}
nav ul li a.active {
color: var(--black);
font-weight: 700;
}
nav ul li a.active::after {
content: ' ';
width: 100%;
height: 2px;
display: block;
position: absolute;
left: 0;
bottom: -4px;
background-color: var(--black);
}
nav ul li:nth-child(4n) {
margin-right: 200px;
}
}
<div class="container">
<div class="header-skin">
<header>
<div class="logo">
logo
</div>
<div class="toggle-menu">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>news</li>
<li>contact</li>
<li>twitter</li>
<li>instagram</li>
</ul>
</nav>
</header>
</div>
<div class="aside"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="functions.js"></script>
</div>

making a dropdown menu using javascript

I am trying to create a dropdown menu for "My Journeys" in the navigation bar using javascript, and I am using flex for the css. And I have no idea what to do, all of the tutorials I've watched didn't use flex for the code. Thank you for your help!
This is my html body code
<body>
<script src="script.js" type="text/javascript"></script>
<div class="pagewrap">
<header>
<img alt= "header" src = "pict/header.jpg">
</header>
<nav>
<ul>
<li> Home </li>
<div id="dropdown">
<li> My Journeys</li>
</div>
<li> Media </li>
<li> About Me & This Blog </li>
</ul>
<form>
<input type="search" placeholder="search...">
<input type="image" src="pict/search-white.png" alt="search">
</form>
</nav>
</div>
</body>
and this is my css code
.pagewrap{
display: flex;
flex-direction: column;
background-color: blue;
width: 75%;
margin: 0 auto;
background-color: black;
}
body{
background-image: url(pict/wallpaper.jpeg);
}
header img{
width: 100%;
margin-top: 4%;
}
nav{
display: flex;
flex-direction: row;
order: -1;
height: 8%;
width: 75%;
top: 0;
background-color: black;
opacity: 0.9;
align-items: center;
position: fixed;
}
nav ul{
display: flex;
flex-grow: 1;
}
nav ul li, #dropdown{
list-style: none;
flex-grow: 1;
margin: 0 2%;
}
nav ul li a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-family: 'Candal', sans-serif;
font-size: 100%;
}
nav ul li a:hover{
color: #660066;
}
form{
display: flex;
flex-direction: row-reverse;
justify-content: flex-start;
width: 20%;
height: 50%;
}
form input[type="search"]{
border-width: 0;
color: white;
background-color: transparent;
}
form input[type="image"]{
margin: auto 2%;
width: 5%;
}

what i have made up from your question is you need my journey drop down with two submenus. Below is the code for same.
Hope it will help.
$('.dropdown').click(function(){ $('.myList').slideToggle(100);});
body {
margin:0;
padding:0;
}
.pagewrap {
background-color: blue;
width: 100%;
background-color: black;
}
body {
background-image: url(pict/wallpaper.jpeg);
}
header img {
width: 100%;
margin-top: 4%;
}
nav {
width:100%;
top: 0;
background-color: black;
position: fixed;
padding:5px;
}
nav ul {
flex-grow: 1;
margin:0;
padding:0;
}
nav ul li, #dropdown {
list-style: none;
display:inline;
margin-right:10px;
}
nav ul li a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-family:'Candal', sans-serif;
font-size: 100%;
}
nav ul li a:hover {
color: #F99D9D;
}
form {
flex-direction: row-reverse;
justify-content: flex-start;
width: 20%;
height: 50%;
}
form input[type="search"] {
border-width: 0;
color: white;
background-color: transparent;
}
form input[type="image"] {
margin: auto 2%;
width: 5%;
}
.myList {
position:absolute;
top:24px;
left:0;
background:#A0A0A0;
width:100px;
z-index:1
}
.myList li {
margin:0;
}
.dropdown {
position:relative;
z-index:3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagewrap">
<nav>
<ul>
<li> Home
</li>
<li class="dropdown"> My Journeys
<ul class="myList" style="display:none;">
<li> menu 1
</li>
<li> menu 2
</li>
</ul>
</li>
<li> Media
</li>
<li> About Me & This Blog
</li>
</ul>
</nav>
</div>

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/