Develop Reference

I made a menu button and a menu but I don't know how to link them together

hello I made a menu button and a menu but I don't know how to link them together when you click on the menu button the menu appears from the top to the center which starts with 0% opacity and gets to 100% opacity when you click on the menu button the menu closes and fades away I will appreciate if you can help me
Here is the code
var menu = document.getElementById("menu");
menu.onclick = function(){
menu.classList.toggle("openmenu");
}
body{
background-color: #333;
}
a{
text-decoration: none;
color: inherit
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu{
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
border-radius: 10px;
cursor: pointer;
}
.menu div{
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span{
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1{
transform: translate(-50%, -12.5px);
}
.menu .line-3{
transform: translate(-50%, 10px);
}
.openmenu .line-1{
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3{
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2{
width: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2{
background: #333;
width: 100%;
height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
}
nav{
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after{
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover{
color: #fff;
}
nav ul li:hover::after{
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>

basically what i did was gave container 2 an active class when click on menu.and defined container2.active in the css.
making it display block in the first place and flex when active
var menu = document.getElementById("menu");
const nav = document.getElementsByClassName("container2")[0];
menu.addEventListener("click", () => {
menu.classList.toggle("openmenu");
nav.classList.toggle("active");
})
body {
background-color: #333;
}
a {
text-decoration: none;
color: inherit
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu {
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6);
border-radius: 10px;
cursor: pointer;
}
.menu div {
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span {
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1 {
transform: translate(-50%, -12.5px);
}
.menu .line-3 {
transform: translate(-50%, 10px);
}
.openmenu .line-1 {
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3 {
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2 {
width: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2 {
background: #333;
width: 100%;
height: 100vh;
display: none;
align-items: flex-start;
justify-content: center;
}
.container2.active {
display: flex;
}
nav {
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after {
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6);
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover {
color: #fff;
}
nav ul li:hover::after {
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2 ">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>

How to delay something thats just a possibility

So i'm making a website, and i have a sort of a slider menu from top, and when i hover over a button everything appears, but when i hover out it doesn't disappear. In my js code i had to delay the disappearance with setTimeout() because there's a small gap between the button and the menu. So if someone would know how to make it disappear while keeping the timer thing so it doesn't disappear when going from button to the menu i'd be insanely grateful. Thanks in advance. Here's the code:
var timeout;
function mouseOver(){
document.getElementById('menu-roll').style.display = 'block';
timeout = setTimeout(function(){document.getElementById('menu-roll').style.display = 'none';}, 3000);
}
function mouseOut(){
clearTimeout(timeout);
}
:root{
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
*{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper{
height: 100vh;
width: 100%;
}
#navbar{
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a{
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover{
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper{
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup{
0%{
top: 150px;
}
100%{
top: 0;
}
}
#menu-wrapper{
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img{
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video{
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll{
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll{
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a{
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover{
text-decoration: underline;
}
ul{
list-style-type: none;
}
#h1-menu-tandoor{
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#h1-menu-restaurace{
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#information-section{
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction{
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1{
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3{
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p{
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider{
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos{
position: relative;
z-index: 6;
height: 10px;
}
.first-photo{
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info{
height: 407px;
}
#services-photo{
top: 50px;
}
#media screen and (max-width: 700px){
.first-photo{
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction{
width: 60%;
margin: 0 auto;
}
#divider{
margin-bottom: 10px;
}
#services-info{
height: 800px;
}
#services-photo{
top: 470px;
position: relative;
}
}
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>

I'm not sure that I understand everything but take a look at this code.
var timeout;
function mouseOver() {
document.getElementById('menu-roll').style.display = 'block';
clearTimeout(timeout);
}
function mouseOut() {
timeout = setTimeout(function() {
document.getElementById('menu-roll').style.display = 'none';
}, 1000);
}
:root {
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper {
height: 100vh;
width: 100%;
}
#navbar {
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover {
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper {
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup {
0% {
top: 150px;
}
100% {
top: 0;
}
}
#menu-wrapper {
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img {
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video {
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll {
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll {
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a {
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover {
text-decoration: underline;
}
ul {
list-style-type: none;
}
#h1-menu-tandoor {
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#h1-menu-restaurace {
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#information-section {
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction {
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1 {
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3 {
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p {
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider {
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos {
position: relative;
z-index: 6;
height: 10px;
}
.first-photo {
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info {
height: 407px;
}
#services-photo {
top: 50px;
}
#media screen and (max-width: 700px) {
.first-photo {
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction {
width: 60%;
margin: 0 auto;
}
#divider {
margin-bottom: 10px;
}
#services-info {
height: 800px;
}
#services-photo {
top: 470px;
position: relative;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/index.css">
<link rel="shortcut icon" href="styles/favicon.ico.png" />
<title>Tandoor</title>
</head>
<body>
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
</body>
</html>

How to create an iOS style dragging using HammerJS and CSS?

I'm trying to create an iOS 'style' modal sheet that that will popup and then the users can drag it down and the modal sheet will follow the users touch gesture and then it will disappear OFF the screen using HammerJS.
I've managed to create the modal sheet and I have also implemented the HammerJS to a certain extend.
When the user 'swipes' down the modal sheet, it will disappear but it doesn't follow the swipe/touch gesture before it hides. it just disappears which makes it a bit clunky.
$(document).on('click', '.button', function() {
$('.addreFinder').css('bottom', '0');
$('.sheet-backdrop').addClass('backdrop-in');
});
///custom modal sheet///
$('.c-modal').each(function() {
var mc = new Hammer(this);
mc.get('swipe').set({
direction: Hammer.DIRECTION_ALL
});
mc.on("swipedown", function(ev) {
console.log('dragged');
$('.modal-in').css('bottom', '-1850px');
$('.sheet-backdrop').removeClass('backdrop-in');
});
});
.sheet-modal.modal-in {
position: absolute;
bottom: -1850px;
left: 0;
width: 100%;
padding: 20px;
transition: bottom 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
display: block;
transform: translate3d(0, 0, 0);
z-index: 13200;
}
.sheet-modal.modal-in,
.sheet-modal.modal-out {
transition-duration: .3s;
}
.demo-sheet-swipe-to-close,
.demo-sheet-swipe-to-step {
--f7-sheet-bg-color: #fff;
--f7-sheet-border-color: transparent;
border-radius: 15px 15px 0 0;
overflow: hidden;
}
.sheet-modal {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60%;
display: none;
box-sizing: border-box;
transition-property: transform;
transform: translate3d(0, 100%, 0);
background: var(--f7-sheet-bg-color);
z-index: 12500;
will-change: transform;
}
.swipe-handler {
height: 16px;
position: absolute;
left: 0;
width: 100%;
top: 0;
background: #fff;
cursor: pointer;
z-index: 10;
}
.page-content {
will-change: scroll-position;
overflow: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
height: 100%;
position: relative;
z-index: 1;
padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
}
.swipe-handler:after {
content: '';
width: 36px;
height: 6px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -18px;
margin-top: -3px;
border-radius: 3px;
background: #666;
}
.block-title-large {
font-size: 20px;
color: #000;
line-height: 40px;
padding: 10px;
margin-top: 20px;
}
.block {
box-sizing: border-box;
position: relative;
z-index: 1;
color: #000;
padding: 10px;
}
.sheet-backdrop.backdrop-in {
visibility: visible;
opacity: 1;
}
.sheet-backdrop {
z-index: 11000;
}
.actions-backdrop,
.custom-modal-backdrop,
.dialog-backdrop,
.popover-backdrop,
.popup-backdrop,
.preloader-backdrop,
.sheet-backdrop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
z-index: 13000;
visibility: hidden;
opacity: 0;
transition-duration: .4s;
}
.bbody {
width: 100%;
box-sizing: border-box;
margin-top: 50px;
}
.wrapper {
text-align: center;
position: relative;
height: 80px;
font-size: 0;
top: 50%;
transform: translateY(-50%);
}
.search {
padding: 0 30px;
font-size: 18px;
width: 80%;
max-width: 400px;
height: 80px;
border: 1px solid #b3b3b3;
border-radius: 20px 0 0 20px;
box-sizing: border-box;
font-size: 13px;
vertical-align: top;
display: inline-block;
}
.submit {
cursor: pointer;
border: none;
background: url('data:image/png;base64,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') no-repeat center center, #1e1e20;
background-size: 35px 35px;
border-radius: 0 20px 20px 0;
padding: 15px 25px;
display: inline-block;
width: 20%;
height: 80px;
box-sizing: border-box;
font-size: 13px;
vertical-align: top;
}
.pac-container {
width: 100%;
}
.pac-item {
cursor: pointer;
padding: 0 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 30px;
vertical-align: middle;
text-align: left;
border-top: 1px solid #e6e6e6;
color: #999;
width: 100%;
}
.pac-icon {
width: 15px;
height: 20px;
margin-right: 7px;
margin-top: 6px;
display: inline-block;
vertical-align: top;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
background-size: 34px;
}
.pac-icon-marker {
background-position: -1px -161px;
}
.addressFinderTexts>* {
margin-top: 10px;
}
.addressFinderTexts p {
font-size: 12px;
}
.useMyCureentLOcationBtn {
width: 80%;
height: 25px;
line-height: 25px;
display: inline-block;
background: #ffaf06;
color: #fff;
font-size: 12px;
margin-top: 15px;
overflow: hidden;
}
.addressFinderTexts {
width: 100%;
margin-top: 20px;
min-height: 380px;
height: auto;
text-align: center;
padding: 10px;
box-sizing: border-box;
color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<div class="sheet-backdrop"></div>
<div class="c-modal sheet-modal demo-sheet-swipe-to-close modal-in addreFinder" id="addressFinder">
<div class="sheet-modal-inner">
<div class="swipe-handler"></div>
<div class="page-content">
<div class="block">
<div class="bbody">
Drag me down to hide me
</div>
</div>
</div>
</div>
</div>
<button class="button">Click Here To show modal</button>
I hope I have explained the situation properly for someone to be able to help me.

Why isn't the background-size or background-repeat property working on my image slider?

I'm making an image slider in my JS and right now I'm just working on the right arrow button and having it cycle up through images in my img folder when that button is clicked. However when I click the arrow to go to the next image, the new image loses a couple properties I have set on it in the CSS; the background size and repeat properties. The fix I found was just adding them back on in the JS.
rightArrow.addEventListener('click', function() {
num++;
img.style.background = 'url(img/fam-' + num + '.jpeg)';
img.style.backgroundRepeat = 'no-repeat'; // Have to add this property back on even though its already in the CSS
img.style.backgroundSize = 'cover'; // Have to add this property back on even though its already in the CSS
})
I don't want to do this though. Why do these properties stop working when I change the image?? Also I can't post my full code here because its too long and and the fiddle link won't be much help because you can't see the images
https://jsfiddle.net/yat5ncmk/3/
const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
const leftArrow = document.querySelector('#left');
const rightArrow = document.querySelector('#right');
const img = document.querySelector('.image-slider');
let num = 1;
ham.addEventListener('click', function() {
ham.classList.add('ham-open');
menu.style.marginLeft = '50px';
})
menuClose.addEventListener('click', function() {
ham.classList.remove('ham-open');
menu.style.marginLeft = '-700px';
})
leftArrow.addEventListener('click', function() {
})
rightArrow.addEventListener('click', function() {
num++;
img.style.background = 'url(img/fam-' + num + '.jpeg)';
img.style.backgroundRepeat = 'no-repeat';
img.style.backgroundSize = 'cover';
})
// window.sr = ScrollReveal();
// sr.reveal('.logo-wrap', {
// duration: 2000,
// origin: 'left',
// });
// sr.reveal('.w1', {
// duration: 2000,
// origin: 'bottom'
// });
// sr.reveal('.w2', {
// duration: 3000,
// origin: 'bottom'
// });
// sr.reveal('.w3', {
// duration: 4000,
// origin: 'bottom'
// });
// sr.reveal('.b1', {
// duration: 2000,
// origin: 'top',
// distance: '50px'
// });
// sr.reveal('.b2', {
// duration: 1500,
// origin: 'top',
// distance: '75px'
// });
// sr.reveal('.b3', {
// duration: 1000,
// origin: 'top',
// distance: '100px'
// });
// sr.reveal('#left', {
// duration: 1000,
// origin: 'top',
// distance: '50px'
// });
// sr.reveal('#right', {
// duration: 1000,
// origin: 'top',
// distance: '50px'
// });
const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
const leftArrow = document.querySelector('#left');
const rightArrow = document.querySelector('#right');
const img = document.querySelector('.image-slider');
let num = 1;
ham.addEventListener('click', function() {
ham.classList.add('ham-open');
menu.style.marginLeft = '50px';
})
menuClose.addEventListener('click', function() {
ham.classList.remove('ham-open');
menu.style.marginLeft = '-700px';
})
leftArrow.addEventListener('click', function() {
})
rightArrow.addEventListener('click', function() {
num++;
img.style.background = 'url(img/fam-' + num + '.jpeg)';
img.style.backgroundRepeat = 'no-repeat'; // Have to add this property back on even though its already in the CSS
img.style.backgroundSize = 'cover'; // Have to add this property back on even though its already in the CSS
})
// window.sr = ScrollReveal();
// sr.reveal('.logo-wrap', {
// duration: 2000,
// origin: 'left',
// });
// sr.reveal('.w1', {
// duration: 2000,
// origin: 'bottom'
// });
// sr.reveal('.w2', {
// duration: 3000,
// origin: 'bottom'
// });
// sr.reveal('.w3', {
// duration: 4000,
// origin: 'bottom'
// });
// sr.reveal('.b1', {
// duration: 2000,
// origin: 'top',
// distance: '50px'
// });
// sr.reveal('.b2', {
// duration: 1500,
// origin: 'top',
// distance: '75px'
// });
// sr.reveal('.b3', {
// duration: 1000,
// origin: 'top',
// distance: '100px'
// });
// sr.reveal('#left', {
// duration: 1000,
// origin: 'top',
// distance: '50px'
// });
// sr.reveal('#right', {
// duration: 1000,
// origin: 'top',
// distance: '50px'
// });
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: url(img/mex-9.jpg);
width: 100%;
height: 100vh;
background-size: cover;
background-attachment: fixed;
background-position: center;
display: flex;
}
.nav-wrap {
flex-basis: 40%;
}
.nav-wrap i {
color: white;
font-size: 2rem;
position: absolute;
right: -33px;
top: 0px;
transition: all .1s ease;
}
.nav-wrap i:hover {
cursor: pointer;
transform: scale(1.15);
}
.nav-box {
margin-left: 50px;
margin-top: 100px;
max-width: 70px;
cursor: pointer;
position: fixed;
z-index: 10;
}
.b1, .b2, .b3 {
width: 70px;
height: 8.5px;
border-radius: 5px;
background-color: #fff;
margin-bottom: 10px;
transition: all .15s ease;
}
.b1 {
background-color: #56ff47;
}
.b3 {
background-color: #ff4c4c;
}
.ham-open .b1 {
background-color: #56ff47;
transform: translateY(100px);
position: relative;
z-index: 1;
}
.ham-open .b2 {
transform: translateY(81.5px);
width: 110px;
position: relative;
left: 60px;
z-index: 0;
}
.ham-open .b3 {
background-color: #ff4c4c;
transform: translateY(63px);
width: 140px;
position: relative;
left: 160px;
z-index: 2;
}
.menu {
display: flex;
border-left: 8px solid #56ff47;
flex-direction: column;
background-color: #fff;
margin-left: -700px;
width: 292px;
padding-top: 10px;
padding-bottom: 10px;
position: fixed;
border-radius: 5px;
top: 225px;
transition: all .15s;
z-index: 10;
}
.menu a {
text-decoration: none;
color: limegreen;
font-family: 'Kumar One Outline';
font-size: 2.3rem;
text-align: center;
margin-top: 12px;
margin-bottom: 12px;
transition: all .5s ease;
}
a:hover {
color: #007001;
}
.info-wrap {
flex-basis: 60%;
}
.info {
font-family: 'Cedarville Cursive';
color: white;
font-weight: bold;
font-size: 4.5rem;
text-align: center;
margin-top: 60px;
}
.logo-wrap {
display: flex;
justify-content: center;
flex-direction: column;
}
.logo-wrap div {
font-family: 'Staatliches';
color: white;
font-size: 13rem;
font-weight: bold;
letter-spacing: 10px;
margin-bottom: -5rem;
position: relative;
margin-left: auto;
margin-right: auto;
}
/*---------------ABOUT---------------*/
.about-section {
background-color: #17a832;
width: 100%;
position: relative;
}
.about-section h1 {
text-align: center;
font-size: 4.5rem;
margin-top: 0;
margin-bottom: 30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.about-line {
width: 350px;
height: 5px;
background-color: #ddae1a;
border-radius: 4px;
position: absolute;
top: 120px;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
.about-wrap {
display: flex;
padding-bottom: 150px;
}
.about-info, .image-slider-wrap {
flex-basis: 50%;
}
.about-info p {
color: white;
font-family: 'Josefin Sans';
font-size: 2rem;
margin-left: 100px;
margin-bottom: 0;
margin-top: 0;
}
.image-slider {
width: 650px;
height: 400px;
background: url(img/fam-1.jpeg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 13px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.image-slider i {
color: white;
font-size: 5rem;
position: absolute;
top: 50%;
margin-top: -40px;
transition: all .1s ease;
cursor: pointer;
}
#left {
transform: rotate(-90deg);
left: -30px;
max-width: 50px;
}
#right {
transform: rotate(90deg);
right: -30px;
}
#left:hover {
transform: rotate(-90deg) scale(1.3);
}
#right:hover {
transform: rotate(90deg) scale(1.3);
}
.burrito, .taco, .guac, .nachos, .hot {
position: absolute;
transform: rotate(-45deg);
bottom: -130px;
right: 200px;
width: 300px;
height: 300px;
z-index: 3;
background-repeat: none;
}
.hot {
right: 345px;
width: 240px;
height: 240px;
z-index: 2;
transform: rotate(0deg);
}
.burrito {
bottom: -140px;
right: 180px;
z-index: 1;
}
.nachos {
transform: rotate(0deg);
right: 380px;
width: 165px;
height: 165px;
bottom: -170px;
}
.taco {
transform: rotate(0deg);
width: 220px;
height: 220px;
bottom: -180px;
right: 460px;
}
.guac {
transform: rotate(0deg);
right: 140px;
bottom: -180px;
width: 250px;
height: 250px;
}
.food-wrap {
position: relative;
right: 20px;
}
/*---------------MENU---------------*/
.menu-section {
background-color: #ddae1a;
display: flex;
width: 100%;
top: -100px;
position: relative;
clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
/*background-image: linear-gradient(4deg, #edb12f 92%, #17a832 92%, #17a832);*/
}
.menu-section h1 {
font-size: 9.5rem;
position: absolute;
top: 30px;
left: 230px;
margin-top: -30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.menu-line {
width: 450px;
height: 5px;
background-color: #17a832;
border-radius: 4px;
position: absolute;
top: 220px;
left: 225px;
}
.column-left, .column-right, .column-middle {
flex-basis: 33.33%;
margin-top: 230px;
padding-bottom: 120px;
}
.column-left {
display: flex;
justify-content: flex-end;
}
.column-left #combo-platter:after {
display: block;
content: "beans and rice included";
color: white;
font-size: 1.5rem;
font-family: 'Josefin Sans';
margin-top: -25px;
}
.column-left h2:not(#combo-platter):after, .column-middle h2:after, .column-right h2:after {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: white;
border-radius: 3px;
margin-top: -25px;
}
.column-middle {
display: flex;
justify-content: center;
}
.column-right {
display: flex;
justify-content: flex-start;
}
.column {
min-width: 420px;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.column h2 {
display: inline-block;
align-self: center;
font-family: 'Cedarville Cursive';
color: #17a832;
font-size: 3rem;
}
.row {
font-family: 'Josefin Sans';
font-size: 1.5rem;
}
.row div {
display: flex;
justify-content: space-between;
}
.row div:after {
display: inline-block;
position: absolute;
content: "";
width: 100%;
margin-top: 33px;
border-top: 4px dotted black;
}
.row div p {
background: #ddae1a;
overflow: hidden;
position: relative;
z-index: 1;
padding: 0 6px;
}
.menu-h2 {
text-align: center;
}
.design-left, .design-right {
position: absolute;
}
.design-right {
right: 0;
transform: rotate(180deg);
}
.arrow-right {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid green;
position: relative;
top: -10px;
}
.arrow-left {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right:60px solid limegreen;
position: relative;
top: 20px;
}
.arrow-top {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid #20a04b;
position: relative;
top: -100px;
left: 60px;
}
.top-middle {
position: relative;
top: -110px;
}
.bottom-middle .arrow-left {
top: -40px;
}
.bottom-middle .move {
top: -70px;
}
.bottom {
position: relative;
top: -48px;
}
.bottom .arrow-left {
top: -40px;
}
/*---------------HOURS---------------*/
.hours-section {
background-color: #17a832;
margin-top: -155px;
clip-path: polygon(0% 5%, 4.8% 0%, 95% 0%, 100% 4.8%, 100% 100%, 0% 100%);
position: relative;
}
.hours-section h1 {
text-align: center;
font-size: 5rem;
margin-top: 0;
margin-bottom: 30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.hours-line-left {
width: 750px;
height: 10px;
border-radius: 4px;
background-color: #ff4c4c;
position: absolute;
top: 10%;
left: 50px;
}
.hours-line-right {
width: 750px;
height: 10px;
border-radius: 4px;
background-color: #56ff47;
position: absolute;
top: 10%;
right: 50px;
}
.hours-wrap {
display: flex;
justify-content: center;
padding-bottom: 100px;
}
.hours {
display: flex;
border: 7px solid green;
padding: 25px;
}
.hours div div {
background-color: white;
color: black;
margin-bottom: 20px;
padding: 8px;
font-size: 3rem;
font-family: 'Josefin Sans';
border-right: 10px solid #56ff47;
}
.hours div div:last-child {
margin-bottom: 0;
}
.hours p {
margin: 0;
text-align: center;
}
.hours-open div {
margin-left: 30px;
}
.hours .hours-open p {
padding: 0 5px;
}
.design-wrap-left-side {
position: absolute;
left: 0;
top: 29.8%;
}
.hex-left, .hex-right {
-webkit-clip-path: polygon(47% 5%, 87% 24%, 87% 76%, 47% 95%, 10% 76%, 10% 24%);
width: 165px;
height: 165px;
background-color: limegreen;
top: 152px;
left: -16.5px;
position: absolute;
}
.hex-right {
top: 152px;
right: -16.5px;
}
.hex-inner {
-webkit-clip-path: polygon(47% 5%, 87% 24%, 87% 76%, 47% 95%, 10% 76%, 10% 24%);
width: 135px;
height: 135px;
background-color: #17a832;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.hex-arrow-left, .hex-arrow-right {
width: 0;
height: 0;
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
border-left: 70px solid limegreen;
position: absolute;
top: 200px;
right: -150px;
}
.design-wrap-right-side {
transform: rotate(180deg);
position: absolute;
right: 0;
bottom: 19.4%;
}
.hours-wrap .design-wrap-left {
transform: rotate(180deg);
position: relative;
top: -80px;
}
.hours-wrap .design-wrap-right {
position: relative;
top: 80px;
}
.design-wrap-left .arrow-top,
.design-wrap-right .arrow-top,
.design-wrap-left-side .arrow-top,
.design-wrap-right-side .arrow-top {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid limegreen;
position: relative;
top: -100px;
left: 60px;
}
.change-color {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid #6acc66;
position: absolute;
top: -10px;
}
/*---------------FOOTER---------------*/
.contact-section-background {
background-color: #666;
height: 300px;
clip-path: polygon(0% 0%, 10% 30%, 90% 30%, 100% 0%, 100% 100%, 0% 100%);
margin-top: -100px;
}
.contact-section {
display: flex;
background-color: #595959;
margin-top: -225px;
position: relative;
padding-bottom: 18px;
z-index: 1;
}
.contact, .location {
flex-basis: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
.contact h1, .location h1 {
margin: 0;
font-family: 'Cedarville Cursive';
color: white;
font-size: 7rem;
}
.hex {
-webkit-clip-path: polygon(25% 60%, 75% 60%, 100% 100%, 0% 100%);
background-color: #17a832;
transform: rotate(180deg);
width: 300px;
height: 150px;
margin: 0 auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 2;
}
.rhombus {
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-color: #17a832;
width: 80px;
height: 80px;
position: absolute;
margin: 0 auto;
top: 60px;
right: 0;
left: 0;
bottom: 0;
z-index: 2;
}
.contact p {
font-family: 'Josefin Sans';
font-size: 2rem;
margin-top: 0;
margin-bottom: 10px;
color: white;
}
.textarea {
position: relative;
min-width: 500px;
}
.contact textarea {
resize: none;
width: 100%;
color: #595959;
margin: 10px;
min-height: 150px;
font-family: 'Josefin Sans';
font-size: 1.5rem;
padding: 5px;
outline: none;
border: none;
background: #474646;
border-radius: 4px;
}
.contact button {
font-size: 1.5rem;
font-family: 'Josefin Sans';
background: darkgrey;
color: #595959;
padding: 4px;
padding-right: 6px;
padding-left: 6px;
border: none;
border-radius: 4px;
cursor: pointer;
position: absolute;
bottom: 10px;
right: -20px;
transition: all .4s ease;
}
.contact button:hover {
color: #ddae1a;
}
.contact-line {
margin-top: 170px;
margin-bottom: 30px;
width: 5px;
border-radius: 3px;
height: 350px;
background: #ddae1a;
position: relative;
}
.links {
display: flex;
position: relative;
max-width: 400px;
top: -5px;
left: 7px;
}
.links i {
font-size: 2.5rem;
margin-right: 15px;
}
.links p {
font-size: 1.5rem;
margin-right: 30px;
margin-top: 8px;
}
#facebook {
color: #3b64ed;
cursor: pointer;
}
#twitter {
color: #5effeb;
cursor: pointer;
}
#yelp {
color: red;
cursor: pointer;
}
.contact-design-wrap-left {
position: absolute;
left: 0;
top: 40px;
max-height: 500px;
}
.contact-design-wrap-right {
position: absolute;
bottom: 40px;
right: 0;
transform: rotate(180deg);
}
.contact-design-wrap-left .bottom {
height: 0;
}
#align {
position: absolute;
left: 70px;
top: -15px;
}
#align2 {
position: absolute;
left: 68px;
top: -5px;
}
.grey {
border-left: 60px solid #666;
}
.light-grey {
border-right: 60px solid #848484;
}
.same {
border-left: 60px solid #848484;
}
.lighter {
border-right: 60px solid #a8a3a3;
}
.map {
position: relative;
top: 50px;
}
.map i {
position: absolute;
color: #ddae1a;
font-size: 4rem;
left: 50%;
margin-left: -24px;
}
.location .map .street-1 {
width: 300px;
position: relative;
top: 80px;
height: 15px;
transform: rotate(90deg);
background-color: #848484;
border-radius: 5px;
}
.location .map .street-2 {
width: 300px;
height: 15px;
position: relative;
top: 65px;
left: 300px;
transform: rotate(90deg);
background-color: #848484;
border-radius: 5px;
}
.location .map .street-3 {
margin-top: 40px;
width: 600px;
position: relative;
top: 30px;
height: 18px;
background-color: #848484;
border-radius: 8px;
}
.street-info {
color: white;
position: absolute;
font-family: 'Josefin Sans';
font-size: 1.2rem;
left: 20px;
padding-top: 3px;
}
.address {
position: absolute;
left: 50%;
top: 75px;
margin-left: -68.5px;
color: #ddae1a;
text-decoration: none;
font-family: 'Josefin Sans';
font-size: 1.2rem;
text-align: center;
}
.address:hover {
color: #ddae1a;
text-decoration: underline;
}
.copyright {
position: absolute;
bottom: 0;
left: 50%;
font-family: 'Josefin Sans';
color: #a8a3a3;
font-size: 1.8rem;
padding-bottom: 5px;
margin: 0 0 0 -253.89px;
}

when you reset the background-image via background, you reset also every other properties.
first thing to do is to reset only background-image not background which is the shorthand for most of the bg properties.
then, you might not need to reset background-size
rightArrow.addEventListener('click', function() {
num++;
img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
})
fiddle uses lorempixel image for demo https://jsfiddle.net/rnxwsf2q/

The background property contains ALL of the background-x subproperties in it.
Just set background-image instead.

Add/Remove class to get a menu to display

I started programming the mobile version of my nav menu earlier. I had to rework my #serviceNav to get it to work in a mobile setting. When doing this I changed my javascript from this:
/*$('#serviceClick').click( function () {
$('#serviceNav').addClass('activeSol');
});*/
$('[data-pop-close]').on('click', function(e) {
//var targeted_pop = $(this).attr('data-pop-close');
$('#serviceNav').removeClass('active');
$('body').css('overflow', 'auto');
e.preventDefault();
});
To this:
$('#serviceClick').click(function() {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('.activeSol').removeClass('activeSol').next('#serviceNav').slideUp(500);
relative.addClass('activeSol').next('#serviceNav').slideDown();
//$('.infoTitles:before').addClass('opened');
} else {
relative.removeClass('activeSol').next('#serviceNav').slideUp(500);
}
return false;
});
The issue that I am having now that I previously didn't with my javascript code is that now my desktop media query version of my #serviceNav is not displaying, however it does display and function in the mobile setting. The trigger for this menu is the menu item called "Solutions". You can see that in a media query over 640px that nothing happens, but 640px or less it applies the fadeDown function.
Does anyone see why this is not working for the larger version media query?
Here is a jsfiddle
Full code:
$('#mobile-button').on('click', function () {
$('#nav-pop').addClass('active');
$('html').addClass('is-navOpen');
});
/*$('#serviceClick').click( function () {
$('#serviceNav').addClass('activeSol');
});*/
$('#serviceClick').click(function() {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('.activeSol').removeClass('activeSol').next('#serviceNav').slideUp(500);
relative.addClass('activeSol').next('#serviceNav').slideDown();
} else {
relative.removeClass('activeSol').next('#serviceNav').slideUp(500);
}
return false;
});
nav {
background: #FFF;
height: 70px;
width: 100%;
max-width: 100%;
box-shadow: 0px 6px 15px -4px rgba(0,0,0,0.12);
position: fixed;
top: 0;
z-index: 999;
box-sizing: border-box;
}
#nav-logo {
float: left;
height: 100%;
width: auto;
display: block;
position: relative;
margin-left: 5%;
}
#nav-logo img {
height: 80%;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);-webkit-transform: translateY(-50%);
}
#mobile-button {
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/menu.svg");
background-size: 30px 30px;
float: right;
width: 30px;
height: 30px;
margin-right: 5%;
margin-top: 15px;
cursor: pointer;
display: none;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#mobile-button:hover {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#nav-pop {
float: right;
display: block;
margin-right: 5%;
margin-top: 25px;
transition: ease 0.5s;-webkit-transition: ease 0.5s;
}
#nav-pop.active {
opacity: 1;
background: rgba(0,0,0,0.8);
background: #2f2f2f;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 999999;
transition: ease 0.6s;-webkit-transition: ease 0.6s;
transform: translateX(0);-webkit-transform: translateX(0);
box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
}
#nav-list li {
display: inline-block;
margin: 0 17px;
vertical-align: top;
}
#nav-list li:first-child {
margin-left: 0px;
}
#nav-list li:last-child {
margin-right: 0px;
}
#nav-list li a, #serviceClick {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: .9rem;
color: #747678;
letter-spacing: 1px;
vertical-align: top;
transition: all .3s;-webkit-transition: all .3s;
cursor: pointer;
}
#nav-list li a:after, #serviceClick:after {
content: '';
display: block;
width: 0;
margin-top: 6px;
background: #b82222;
height: 2px;
transition: width .3s;
}
#nav-list li a:hover, #serviceClick:hover {
color: #4b4b4b;
transition: all .3s;-webkit-transition: all .3s;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 100%;
transition: width .3s;
}
#nav-list li a.navInverse {
padding: 10px 12px;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.2rem;
color: #FFF;
border: 1px solid #b82222;
background: linear-gradient(to right bottom, #b82222, #a51e1e);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
#nav-list li a.navInverse:hover {
background: #b82222;
background: #FFF;
color: #b82222;
/*transition: all 0s;-webkit-transition: all 0s;*/
}
#nav-list li a.navInverse:after {
content: '';
display: none;
width: 0px;
height: 0px;
transition: none;
}
#nav-pop-close {
display: none;
}
#nav-pop-close, #close-panel {
position: relative;
top: 3%;
left: 90%;
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/icon_close.png");
background-size: 30px 30px;
background-repeat: no-repeat;
height: 30px;
width: 30px;
cursor: pointer;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
top: -40vh;
left: 0;
z-index: -1;
position: fixed;
background-color: rgba(0,0,0,0);
height: 40vh;
transition: all .4s;
padding: 20px 0;
}
#serviceNav.activeSol {
top: 0;
width: 100%;
background-color: rgba(0,0,0,.9);
z-index: 99999;
height: 40vh;
}
.popup-close {
position: absolute;
right: 12px;
top: 12px;
width: 32px;
height: auto;
}
#serviceNavInner {
margin: 0 5%;
height: 100%;
position: relative;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 33%;
height: 100%;
border-right: 1px solid rgba(255,255,255,.5);
position: relative;
}
#serviceNavBlock1Wrap {
width: 80%;
text-align: left;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 66.6%;
height: 100%;
margin: 10px auto;
position: relative;
}
.servNavItemWrap {
display: inline-block;
vertical-align: top;
width: 25%;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
.servNavItemWrap img {
width: 75px;
height: 75px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover img {
-webkit-transition: all 0.25s;transition: all 0.25s;
-webkit-transform: scale(1.1);transform: scale(1.1);
-webkit-backface-visibility: hidden;
}
.servNavItemWrap a {
text-decoration: none;
outline: none;
box-sizing: border-box;
}
.servNavItemTitle {
margin-top: 5px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover .servNavItemTitle {
color: #FFF;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
#mobile-button {
display: block;
}
#nav-pop {
float: none;
opacity: 0;
position: fixed;
margin-top: 0;
width: 75%;
right: -100%;
height: 100vh;
transform: translateX(100%);-webkit-transform: translateX(100%);
}
#nav-pop-close {
display: block;
background-size: 20px 20px;
height: 20px;
width: 20px;
}
#nav-list {
margin-top: 20px;
}
#nav-list li {
display: block;
position: relative;
width: 100%;
margin: 0;
padding: 20px 10%;
background: linear-gradient(to bottom right, #151515, #2f2f2f);
background: #2f2f2f;
text-align: left;
cursor: pointer;
border-bottom: .3px solid #FFF;
}
#quoteButton {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
#nav-list li:hover #quoteButton {
background: #2f2f2f;
}
#nav-list li:hover, #nav-list li:active {
background: #000;
}
#nav-list li:first-child {
margin-left: 0;
}
#nav-list li:last-child {
margin: 20px auto;
text-align: center;
border-bottom: none;
background: #2f2f2f;
padding: 20px 0;
}
#nav-list li a, #serviceClick {
font-family: 'Nunito', sans-serif;
font-size: .8rem;
color: #FFF;
letter-spacing: .3rem;
}
#nav-list li a:after, #serviceClick:after {
display: none;
}
#nav-list li a:hover, #serviceClick:hover {
color: #FFF;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 0%;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
z-index: 1;
position: relative;
background-color: rgba(0,0,0,0);
height: 200px;
transition: all .4s;
padding: 10px 0;
display: none;
top: 0;
}
#serviceNav.activeSol {
background-color: #000;
z-index: 9999999;
height: auto;
min-height: 20%;
top: 0;
border-bottom: .01em solid #FFF;
}
.popup-close {
display: none;
}
#serviceNavInner {
margin: 0 2.5%;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 100%;
height: 50px;
border-right: none;
display: block;
position: relative;
}
#serviceNavBlock1Wrap {
width: 100%;
text-align: center;
}
#navOverviewT, #navOverviewP {
display: none;
}
#solOverviewB {
font-size: .7rem;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 100%;
height: 100%;
margin: 10px auto;
display: block;
}
.servNavItemWrap {
display: inline-block;
width: 25%;
margin-bottom: 15px;
}
.servNavItemWrap img {
width: 30px;
height: 30px;
}
.servNavItemTitle {
margin-top: 5px;
font-size: .5rem;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<div id="nav-logo">
</div>
<div id="mobile-button"><img src="" class="hidden" alt=""></div>
<div id="nav-pop">
<div id="nav-pop-close"></div>
<ul id="nav-list">
<li>ABOUT</li>
<li id="serviceClick">SOLUTIONS</li>
<div id="serviceNav">
<div id="serviceNavInner">
<div id="serviceNavBlock1" class="iblock">
<button class="buttonInv2" id="solOverviewB">Solutions Overview</button>
</div><div id="serviceNavBlock2" class="iblock">
</div>
</div>
</div>
<li>LEARN</li>
<li>CONTACT</li>
<li>REQUEST QUOTE</li>
</ul>
</div>
</nav>

There is a lot going on here and frankly, it's hard to decipher but I think "Nothing happens" is relative. When inspecting the element in dev console you can see the Javascript styling is being added appropriately. So something is happening, it's simply happening off screen because you've told it to. I think the culprit here, is the >640px positioning of your #serviceNav element is maintained at top: -40vh; That's a lot. When removing this value the button displays as follows:
Note: you will have to change some other things around as this displays it on page load. But you get the idea