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>

Dropdown list appears (on hover) even when it's hidden inside the mobile menu

In my navbar I have a li item that opens a dropdown menu when someone hovers over it. In small screens I have a hamburger menu that hides it.
The problem is that in mobile view, even though the li item is "hidden" inside the menu when someone hovers over its position on screen it appears (even though it is hidden inside the menu).
I think that this probably happens because I set "visibility: hidden;" but I don't know how else to do it.
I mean I want to dropdown when someones hover it on desktop view but on mobile I want to dropdown only if someones open the menu and then hover over it (or maybe click on it).
To save space I included below only the code that I find more relevant.
$(function() {
$(".toggle").on("click", function() {
if ($(".item").hasClass("active")) {
$(".item").removeClass("active");
} else {
$(".item").addClass("active");
}
});
});
nav {
background: #3e3e40;
padding: 0 20px;
}
ul {
list-style-type: none;
}
a {
color: white;
text-decoration: none;
}
a:hover{
color: rgb(189, 169, 136);
}
nav a:focus{
outline: 0;
}
.logo a:hover {
text-decoration: none;
}
.menu li {
font-size: 16px;
padding: 15px 5px;
white-space: nowrap;
}
.logo img{
width: 50px;
height: 40px;
}
.logo{
padding: 0;
flex: 1;
}
.toggle a {
font-size: 20px;
}
nav, ul, li{
margin: 0;
padding-top: 0;
padding-bottom: 0;
}
/* Mobile menu */
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.toggle {
order: 1;
}
.cart{
order:1
}
.item {
width: 100%;
text-align: center;
order: 3;
display: none;
}
.login-info{
order:2
}
.item.active {
display: block;
}
/* Navbar Toggle */
.toggle {
cursor:pointer;
}
.bars {
background: #999;
display: inline-block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.bars:before,
.bars:after {
background: #999;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.bars:before {
top: 5px;
}
.bars:after {
top: -5px;
}
/*---------------dropdown li css-------------------*/
.dropdwn {
position: relative;
display: inline-block;
color: white;
}
.dropdwn-content {
visibility: hidden;
opacity: 0;
position: absolute;
background-color: #ffffff;
padding: 12px 16px;
right: 39.5%;
z-index: 1;
height: 0;
}
.dropdwn-content a{
color: #3e3e40;
}
.dropdwn-content li{
color: #3e3e40;
}
.dropdwn-content a:focus{
outline:0;
}
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
visibility: visible;
opacity: 1;
height: auto;
transition: all 250ms ease-in;
}
/*------font awesome and pseudo classes navbar-----*/
.fa-lg{
color: rgb(255, 255, 255);
font-size: 26px;
position: relative;
}
.fa-lg::before{
content: '';
border: rgb(255, 255, 255);
border-style: solid;
border-width: 2px;
border-radius: 50%;
position: absolute;
width: 43px;
height: 43px;
right:14px;
top:-8px
}
.badge:after{
content:attr(value);
font-size:18px;
color: #fff;
background: rgb(92, 148, 166);
border-radius:50%;
padding: 0 5px;
position:relative;
left:-2px;
top:-15px;
opacity:0.9;
}
.pseudo::before{
content:attr(username);
display: block;
font-size: 12px;
width: auto;
height: 6px;
margin-bottom: 12px;
}
.circle{
border: #fff;
border-style: solid;
border-radius: 50%;
width: 40px;
height: 40px;
}
/* Tablet menu */
#media all and (min-width: 468px) {
.menu {
justify-content: center;
}
}
/* Desktop menu */
#media all and (min-width: 768px) {
.item {
display: block;
width: auto;
}
.toggle {
display: none;
}
.item {
order: 2;
}
.menu li {
padding: 15px 10px;
}
.dropdwn {
position: relative;
display: inline-block;
}
.dropdwn-content {
position: absolute;
right: auto;
padding: 12px 16px;
z-index: 1;
}
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
}
.signup{
padding-right: 2rem;
}
.pseudo::before{
width: 10px;
margin-bottom: 10px;
}
.pseudo::after{
content:'';
display: block;
font-size: 13px;
width: auto;
height: 7px;
margin-bottom: 10px;
}
}
<!DOCTYPE HTML>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="max-age=604800" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<nav>
<ul class="menu">
<li class="logo"><a href="{%url 'home'%}"><img src="" alt="Company's logo"><a/></li>
</li>
<li class="item">
Home
</li>
<li class="item">
Store
</li>
<li class="dropdwn item">
<span class="item">Categories</span>
<ul class="dropdwn-content">
<li>Product1</li>
<li>Product2</li>
</ul>
</li>
<li class="item">
Login
</li>
<li class="item">
Signup
</li >
<li class="item">
<form action="" method='GET' >
<input type="text" placeholder="Search.." name="keyword">
<button type="submit" >
</button>
</form>
</li>
<li class="toggle"><span class="bars"></span></li>
</ul>
</nav>
</body>

I solved it using media queries
Adjust for whatever pixle size you want
Code Pen Link:
Click Here
<!DOCTYPE HTML>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="max-age=604800" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<nav>
<ul class="menu">
<li class="logo"><a href="{%url 'home'%}"><img src="" alt="Company's logo"><a/></li>
</li>
<li class="item">
Home
</li>
<li class="item">
Store
</li>
<!-- dropdwn -->
<li class=" item dropdwn">
<span class="item">Categories</span>
<ul class="dropdwn-content disapear">
<li class="disapear">Product1</li>
<li class="disapear">Product2</li>
</ul>
</li>
<li class="item">
Login
</li>
<li class="item">
Signup
</li >
<li class="item">
<form action="" method='GET' >
<input type="text" placeholder="Search.." name="keyword">
<button type="submit" >
</button>
</form>
</li>
<li class="toggle"><span class="bars"></span></li>
</ul>
</nav>
</body>
nav {
background: #3e3e40;
padding: 0 20px;
}
#media all and (max-width:800px){
.disapear{
display: none;
}
}
ul {
list-style-type: none;
}
a {
color: white;
text-decoration: none;
}
a:hover{
color: rgb(189, 169, 136);
}
nav a:focus{
outline: 0;
}
.logo a:hover {
text-decoration: none;
}
.menu li {
font-size: 16px;
padding: 15px 5px;
white-space: nowrap;
}
.logo img{
width: 50px;
height: 40px;
}
.logo{
padding: 0;
flex: 1;
}
.toggle a {
font-size: 20px;
}
nav, ul, li{
margin: 0;
padding-top: 0;
padding-bottom: 0;
}
/* Mobile menu */
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.toggle {
order: 1;
}
.cart{
order:1
}
.item {
width: 100%;
text-align: center;
order: 3;
display: none;
}
.login-info{
order:2
}
.item.active {
display: block;
}
/* Navbar Toggle */
.toggle {
cursor:pointer;
}
.bars {
background: #999;
display: inline-block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.bars:before,
.bars:after {
background: #999;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.bars:before {
top: 5px;
}
.bars:after {
top: -5px;
}
/*---------------dropdown li css-------------------*/
.dropdwn {
position: relative;
display: inline-block;
color: white;
}
.dropdwn-content {
opacity: 0;
position: absolute;
background-color: #ffffff;
padding: 12px 16px;
right: 39.5%;
z-index: 1;
height: 0;
}
.dropdwn-content a{
color: #3e3e40;
}
.dropdwn-content li{
color: #3e3e40;
}
.dropdwn-content a:focus{
outline:0;
}
#media all and (min-width: 800px){
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
opacity: 1;
height: auto;
transition: all 250ms ease-in;
}
}
/*------font awesome and pseudo classes navbar-----*/
.fa-lg{
color: rgb(255, 255, 255);
font-size: 26px;
position: relative;
}
.fa-lg::before{
content: '';
border: rgb(255, 255, 255);
border-style: solid;
border-width: 2px;
border-radius: 50%;
position: absolute;
width: 43px;
height: 43px;
right:14px;
top:-8px
}
.badge:after{
content:attr(value);
font-size:18px;
color: #fff;
background: rgb(92, 148, 166);
border-radius:50%;
padding: 0 5px;
position:relative;
left:-2px;
top:-15px;
opacity:0.9;
}
.pseudo::before{
content:attr(username);
display: block;
font-size: 12px;
width: auto;
height: 6px;
margin-bottom: 12px;
}
.circle{
border: #fff;
border-style: solid;
border-radius: 50%;
width: 40px;
height: 40px;
}
/* Tablet menu */
#media all and (min-width: 468px) {
.menu {
justify-content: center;
}
}
/* Desktop menu */
#media all and (min-width: 768px) {
.item {
display: block;
width: auto;
}
.toggle {
display: none;
}
.item {
order: 2;
}
.menu li {
padding: 15px 10px;
}
.dropdwn {
position: relative;
display: inline-block;
}
.dropdwn-content {
position: absolute;
right: auto;
padding: 12px 16px;
z-index: 1;
}
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
}
.signup{
padding-right: 2rem;
}
.pseudo::before{
width: 10px;
margin-bottom: 10px;
}
.pseudo::after{
content:'';
display: block;
font-size: 13px;
width: auto;
height: 7px;
margin-bottom: 10px;
}
}

jQuery toggle() working bottom to top, but not top to bottom

In the demo below, when in a mobile viewport <=768px I do the following:
Click on Product, to open Product's mega menu.
Scroll down, and click on Resources.
I expect Product's mega menu to close, and Resource's mega menu to open.
What happens is Product's mega menu closes, but Resource's mega menu doesn't open.
The problem doesn't exist working in the reverse order, i.e. opening Resource's mega menu first, then clicking on Product to close Resource's mega menu, and opening Product's mega menu (this works fine).
I've considered if an element is overlapping the correct item and preventing the right element from being clicked - I don't think this is the case.
You'll need to click the burger menu # top right to see what happens.
Help appreciated.
$(document).ready(function () {
if (window.innerWidth > 768) {
$(".mega-drop-down").hover(function() {
$(this).find('a span').toggleClass('hover');
$('.mega-menu').not($(this).children('.mega-menu').toggle()).hide();
$('.exo-menu').find('a span').not($(this).find('a span')).removeClass('hover');
});
}
$(".mega-drop-down").on('click', function () {
if (window.innerWidth <= 768) {
$('.mega-menu').not($(this).children('.mega-menu').toggleClass('hide-block')).addClass('hide-block');
$(this).find('a span').toggleClass('hover');
$('.exo-menu').find('a span').not($(this).find('a span')).removeClass('hover');
}
});
$('.toggle-menu').click(function(){
$('.exo-menu').toggleClass('display');
$('#mm-button-group').toggle();
});
});
.fl-builder-content[data-type="header"].fl-theme-builder-header-sticky {
z-index: 1000;
}
ul.exo-menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.cabeza, ul.manos, ul.corporal {
list-style-type: none;
padding: 0;
}
/*.container-fluid.megamenusip {
width: 1200px;
}*/
.content {
margin: 50px 100px 0px 100px;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
padding-left: 0;
padding-right: 0;
}
.exo-menu {
float: none;
margin: auto;
list-style: none;
position: relative;
}
.exo-menu > li {
display: inline-block;
float: left;
position: relative;
}
.exo-menu > li > a {
color: black;
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.exo-menu > li > a:hover {
color: #23ADF8;
}
.exo-menu i {
float: left;
font-size: 18px;
margin-right: 6px;
line-height: 20px !important;
}
li.drop-down, .flyout-right, .flyout-left {
position: relative;
}
li.drop-down:before {
content: "f103";
color: #fff;
font-family: FontAwesome;
font-style: normal;
display: inline;
position: absolute;
right: 6px;
top: 20px;
font-size: 14px;
}
li.drop-down > ul {
left: 0px;
min-width: 230px;
}
.drop-down-ul {
display: none;
}
.flyout-right > ul, .flyout-left > ul {
top: 0;
min-width: 230px;
display: none;
border-left: 1px solid #365670;
}
li.drop-down > ul > li > a, .flyout-right ul > li > a, .flyout-left ul > li > a {
color: #fff;
display: block;
padding: 20px 22px;
text-decoration: none;
background-color: #365670;
border-bottom: 1px dotted #547787;
-webkit-transition: color 0.2s linear, background 0.2s linear;
-moz-transition: color 0.2s linear, background 0.2s linear;
-o-transition: color 0.2s linear, background 0.2s linear;
transition: color 0.2s linear, background 0.2s linear;
}
.flyout-right ul > li > a, .flyout-left ul > li > a {
border-bottom: 1px dotted #B8C7BC;
}
.flyout-mega-wrap {
top: 0;
right: 0;
left: 100%;
width: 100%;
display: none;
height: 100%;
padding: 15px;
min-width: 742px;
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
}
.flyout-mega ul > li > a {
font-size: 90%;
line-height: 25px;
color: #fff;
font-family: inherit;
}
.flyout-mega ul > li > a:hover, .flyout-mega ul > li > a:active, .flyout-mega ul > li > a:focus {
text-decoration: none;
background-color: transparent !important;
color: #ccc !important
}
.animated.fadeIn.mega-menu {
margin-top: 0;
}
.mega-menu {
left: 0;
right: 0;
width: 100vw;
display: none;
position: fixed;
padding-top: 0;
padding-top: 10px;
}
.mega-menu-wrap {
background-color: white;
}
.mm-mega-menu-wrap {
box-shadow: 3px 3px 10px 0 rgb(206 206 206 / 51%);
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
padding-top: 23px;
}
.mega-menu ul li a {
line-height: 25px;
font-size: 15px;
color: black;
font-weight: 600;
display: block;
}
ul.stander li a {
padding: 3px 0px;
}
ul.description li {
padding-bottom: 12px;
line-height: 8px;
}
ul.description li span {
color: #ccc;
font-size: 85%;
}
a.view-more {
border-radius: 1px;
margin-top: 15px;
background-color: #009FE1;
padding: 2px 10px !important;
line-height: 21px !important;
display: inline-block !important;
}
a.view-more:hover {
color: #fff;
background: #0DADEF;
}
ul.icon-des li a i {
color: #fff;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
background-color: #009FE1;
line-height: 35px !important;
}
ul.icon-des li {
width: 100%;
display: table;
margin-bottom: 11px;
}
/*Blog DropDown*/
.Blog {
left: 0;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Blog .blog-title {
color: #fff;
font-size: 15px;
text-transform: uppercase;
}
.Blog .blog-des {
color: #ccc;
font-size: 90%;
margin-top: 15px;
}
.Blog a.view-more {
margin-top: 0px;
}
/*Images*/
.Images {
left: 0;
width: 100%;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Images h4 {
font-size: 15px;
margin-top: 0px;
text-transform: uppercase;
}
/*common*/
.flyout-right ul > li > a, .flyout-left ul > li > a, .flyout-mega-wrap {
background-color: white;
}
/*hover*/
.Blog:hover, .Images:hover, .mega-menu:hover, .drop-down-ul:hover, li.flyout-left > ul:hover, li.flyout-right > ul:hover, .flyout-mega-wrap:hover, li.flyout-left a:hover + ul, li.flyout-right a:hover + ul, .blog-drop-down > a:hover + .Blog, li.drop-down > a:hover + .drop-down-ul, .images-drop-down > a:hover + .Images, .mega-drop-down a:hover + .mega-menu, li.flyout-mega > a:hover + .flyout-mega-wrap {
display: block;
}
a.toggle-menu {
position: absolute;
right: 10px;
padding: 20px;
font-size: 27px;
color: black;
top: 0px;
transform: rotate(90deg);
margin-top: -13px;
}
.fl-node-5dafd29034e78 {
z-index: 210 !important;
position: relative;
}
.megamenusip, .mega-menu, .Images, .Blog, .flyout-right > ul, .flyout-left > ul, li.drop-down > ul {
z-index: 200;
}
.circle_image02 {
opacity: 1.0 !important;
filter: alpha(opacity=50) !important; /* For IE8 and earlier */
}
.circle_image02:hover {
opacity: 0.5 !important;
filter: alpha(opacity=100) !important; /* For IE8 and earlier */
}
.mega-menu-wrap li {
margin-bottom: 22px;
padding-right: 30px;
}
.mm-mm-icon {
vertical-align: top;
margin-right: 14px;
width: 32;
height: 32;
}
.mm-mm-subtext {
display: inline-block;
margin-left: 46px;
font-size: 13px;
}
.mega-drop-down > a > span::after {
font-family: 'Font Awesome\ 5 Free';
content: '\f107';
padding-left: 5px;
}
.mega-drop-down > a > span.hover::after {
font-family: 'Font Awesome\ 5 Free';
content: '\f106';
}
.mega-drop-down > a > span.hover, .mega-drop-down > a:active {
color: #23ADF8;
}
.mm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.mm-grid div:nth-of-type(2) {
padding: 10px 10px 10px 35px;
}
.mm-mm-video {
display: inline-block;
background-color: white;
border: 2px solid #EDEDED;
margin-top: 17px;
padding: 13px;
border-radius: 24px;
height: 47px;
width: 161px;
}
.mm-mm-video:hover {
background-color: #23ADF8;
border-color: #23ADF8;
}
.mm-mm-video a {
color: #23ADF8;
}
.mm-mm-video:hover a {
color: white;
}
.mm-mm-video:hover img {
filter: invert(42%) brightness(180%) contrast(180%);
}
.mega-drop-down a:hover + .mega-menu.hide-block {
display: none;
}
.mm-mm-flyout {
display: inline-block;
width: 100%;
font-size: 15px;
}
.animated.mega-menu {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.mega-menu ul li a:hover {
color: #23ADF8;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.mm-grid {
width: 400px;
max-width: 100%;
}
h4.row.mega-title {
padding-left: 0;
}
.row .col-md-2, .row .col-md-3, .row .col-md-4 {
padding-left: 0;
padding-right: 0;
}
#media (min-width: 1349px) {
.fl-node-5dafd29034e79 {
width: 16%;
}
.fl-node-g84bp2nweskf {
width: 3%;
}
}
#media (min-width: 1300px) {
.mega-menu-wrap {
width: 1280px;
margin: auto;
}
}
#media (max-width: 1299px) {
.mega-menu-wrap {
width: 100%;
}
}
#media (min-width: 1252px) {
.exo-menu > li > a {
display: block;
padding: 30px 22px 32px;
}
}
#media (max-width: 1251px) {
.exo-menu > li > a {padding: 30px 15px 32px;}
}
#media (max-width: 1199px) {
.mega-menu {
width: 100vw;
}
}
#media (max-width: 1151px) {
.fl-col-group-equal-height .fl-col.fl-node-5dafd77b08a6a {display: none;}
}
#media (max-width: 1025px) {
.fl-col-group-equal-height .fl-col.fl-node-5e6078af59549 {display: none;}
}
#media (min-width: 992px) {
.exo-menu > li:nth-child(1) > a {
padding-left: 0;
}
.col-md-2 {
width: 16.66666667%;
float: left;
}
.col-md-3 {
width: 25%;
float: left;
padding-left: 0;
}
.col-md-4 {
width: 33.33333333%;
float: left;
}
}
#media (max-width: 991px) {
.empty {
display: none;
}
}
#media (min-width: 789px) and (max-width: 800px) {
.exo-menu > li > a {
padding: 30px 12px 32px;
}
}
#media (min-width: 769px) {
.mm-grid {
margin-bottom: 27px;
}
#mm-button-group {display: none;}
}
#media (min-width: 768px) {
.mega-menu, .flyout-mega-wrap, .Images, .Blog, .flyout-right > ul, .flyout-left > ul, li.drop-down > ul {
position: fixed;
margin-top: 0;
}
.flyout-right > ul {
left: 100%;
}
.flyout-left > ul {
right: 100%;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
padding: 0 15px;
}
}
#media (max-width: 768px) {
.fl-builder-content .fl-node-5dafd29034e79 {
width: calc(100vw - 130px) !important;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 130px !important;
}
.fl-builder-content .fl-node-g84bp2nweskf {display: none;}
.fl-node-5dafd2ede7f58 > .fl-module-content {
margin-left: 0;
}
.exo-menu {
min-height: 58px;
width: 100%;
}
.mega-menu {
padding: 15px;
}
.animated.mega-menu {
padding-left: 22px;
padding-right: 22px;
margin-left: -22px;
margin-right: -22px;
}
.mm-mega-menu-wrap {
box-shadow: none;
}
.mega-menu-wrap {
background-color: transparent;
}
ul.exo-menu.display {
/*width: 100vw;*/
left: 0;
position: relative;
margin-top: 25px;
background-color: white;
min-height: calc(100vh - 238px);
}
a.toggle-menu {
right: 0;
top: 0;
}
.mega-drop-down > a > span::after {
float: right;
padding-right: 6px;
}
.exo-menu.display a.toggle-menu span {
display: none;
}
.exo-menu.display a.toggle-menu {
position: absolute;
right: 21px;
padding: 20px 4px;
font-size: 27px;
margin-top: -70px;
color: #212121;
}
.exo-menu.display a.toggle-menu:hover, a.toggle-menu:hover {
color: #212121;
}
.exo-menu.display a.toggle-menu:before {
display: block !important;
font-family: 'Font Awesome\ 5 Free';
content: '\f00d';
transform: rotate(90deg);
color: #B2B2B2;
font-weight: 900;
margin-top: 20px;
margin-right: -48px;
}
.exo-menu > li > a {
display: none;
padding: 30px 8px 32px;
}
.exo-menu > li {
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid #EDEDED;
}
.exo-menu > li.mm-li-button {
border-bottom: none;
}
.display.exo-menu > li {
width: calc(100vw - 44px);
display: block;
float: none;
}
.display.exo-menu > li > a {
display: block;
padding: 20px 0;
font-size: 24px;
}
.mega-menu, .Images, .Blog, .flyout-right > ul, .flyout-left > ul, li.drop-down > ul {
position: relative;
}
.mega-menu {
background-color: #F8F8F8;
}
#menu-item-1225 {
margin-top: -5px;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 40px !important;
}
#see-all-features {content: url('https://global-site.local/wp-content/uploads/2022/02/what-is-digital-signage-mobile.jpg');}
#just-4-steps {content: url('https://global-site.local/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business-mobile.jpg');}
.mega-menu.hide-block {
display: none !important;
}
#mm-button-group {display: none;}
#mm-button-group .mm-mm-button a.fl-button {
font-family: Poppins, sans-serif;
font-weight: 600;
font-size: 16px;
border: 1px solid #23ADF8 !important;
background-color: white !important;
background-clip: border-box;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
width: 100%;
text-align: center;
/*margin: 10px 0;*/
}
.fl-page #mm-mm-button-2 .mm-mm-button a.fl-button {
border: 1px solid #EDEDED !important;
}
.fl-page .mm-mm-button a.fl-button span {
color: #23ADF8 !important;
}
#mm-button-group {
position: relative;
bottom: -5px;
list-style-type: none;
padding-left: 0;
width: 100%;
background-color: white;
padding-bottom: 24px;
}
#mm-button-group li {
padding: 10px 0 0 0;
background-color: white;
}
.container-fluid.megamenusip {
display: flex;
flex-direction: column;
flex-wrap: wrap;
position: absolute;
left: 0;
width: 100vw;
min-height: 100vh;
}
h4.row.mega-title {padding-top: 11px;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="header-top">
<div class="container-fluid megamenusip">
<ul class="exo-menu">
<li class="mega-drop-down"><span>Product</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Instant Digital Signage Platform</h4>
<ul class="cabeza">
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-features.svg" alt="features" class="mm-mm-icon" />Features <span class="mm-mm-subtext">See all the features packed into this powerful digital signage platform.</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-templates.svg" alt="templates" class="mm-mm-icon" />Templates <span class="mm-mm-subtext">1000’s of professionally designed templates for every business.</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-how-it-works.svg" alt="templates" class="mm-mm-icon" />How it Works <span class="mm-mm-subtext">Find out how easy it is to get digital signage for your business.</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-industries.svg" alt="templates" class="mm-mm-icon" />Industries <span class="mm-mm-subtext">Digital signage is perfect for any business with tailored solutions.</span></li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get the Player</h4>
<ul class="manos">
<li>Hardware</li>
<li>Player Software</li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">What is Instant Digital Signage?</h4>
<div class="mm-grid">
<div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage.jpg" alt="What is Instant Digital Signage?" style="width: 100%;" id="see-all-features"/></div>
<div><span class="mm-mm-flyout"> Get an overview of how easy it is to get digital signage</span><br />
<button class="mm-mm-video">
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><span>Solutions</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Industries</h4>
<ul class="cabeza">
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hospitality.svg" alt="features" class="mm-mm-icon" />Hospitality <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-retail.svg" alt="templates" class="mm-mm-icon" />Retail <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hair-beauty.svg" alt="templates" class="mm-mm-icon" />Hair & Beauty <span class="mm-mm-subtext">Hair Salons, Nail Salon, Laser…</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="cabeza">
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-medical.svg" alt="features" class="mm-mm-icon" />Medical <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-fitness.svg" alt="templates" class="mm-mm-icon" />Fitness <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-more.svg" alt="templates" class="mm-mm-icon" />More <span class="mm-mm-subtext">We have solutions for all industries…</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">Use Cases</h4>
<ul class="manos">
<li>Digital Menu Boards</li>
<li>Window Signage</li>
<li>In-Store Signage</li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">About Mandoe</h4>
<ul class="manos">
<li>Enterprise</li>
<li>Customers</li>
<li>Partner Program</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><span>Resources</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Learn about the product</h4>
<ul class="cabeza">
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-blog.svg" alt="features" class="mm-mm-icon" />Blog <span class="mm-mm-subtext">Ultimate Guides for getting started, news, updates and much more.</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-case-studies.svg" alt="templates" class="mm-mm-icon" />Case Studies <span class="mm-mm-subtext">See how our customers have found success in their journey with us.</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-help-centre.svg" alt="templates" class="mm-mm-icon" />Help Centre <span class="mm-mm-subtext">Learn how to get started, create content, manage schedules & more.</span></li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get in Touch</h4>
<ul class="manos">
<li>About</li>
<li>Contact</li>
<li>Support</li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">Learn how it works</h4>
<div class="mm-grid">
<div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business.jpg" alt="Just 4 steps to get digital signage for your business" style="width: 100%;" id="just-4-steps" /></div>
<div><span class="mm-mm-flyout">Just 4 steps to get digital signage for your business</span><br />
<button class="mm-mm-video">
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>Pricing</li>
<span>|||</span>
</ul>
<ul id="mm-button-group">
<li class="mm-li-button" id="mm-mm-button-1">
<div class="fl-button-wrap mm-mm-button">
<a href="https://sandbox.mandoemedia.com/signup?origin=mktg_portal" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Start Free Trial</span>
</a>
</div>
</li>
<li class="mm-li-button" id="mm-mm-button-2">
<div class="fl-button-wrap mm-mm-button">
<a href="https://activate.mandoemedia.com" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Log In</span>
</a>
</div>
</li>
</ul>
</div>
</div>

Remove display: none; from .mega-menu:
.mega-menu {
left: 0;
right: 0;
width: 100vw;
/*display: none;*/
position: fixed;
padding-top: 0;
padding-top: 10px;
}
Also, use same method to toggle menus for both hover and click handlers. Using different methods for both makes things complicated. I've used .mega-menu.hide-block for both small and wide screens in following demo:
Demo on codesandbox
$(document).ready(function() {
$(".mega-drop-down").hover(function() {
if (window.innerWidth > 768) {
showMenu(this);
}
});
$(".mega-drop-down").on("click", function() {
if (window.innerWidth <= 768) {
showMenu(this);
}
});
$(".toggle-menu").click(function() {
$(".exo-menu").toggleClass("display");
$("#mm-button-group").toggle();
$(".mega-menu").addClass("hide-block");
});
});
function showMenu(self) {
$(".mega-menu")
.not($(self).children(".mega-menu").toggleClass("hide-block"))
.addClass("hide-block");
$(self).find("a span").toggleClass("hover");
$(".exo-menu")
.find("a span")
.not($(self).find("a span"))
.removeClass("hover");
}
.fl-builder-content[data-type="header"].fl-theme-builder-header-sticky {
z-index: 1000;
}
ul.exo-menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.cabeza,
ul.manos,
ul.corporal {
list-style-type: none;
padding: 0;
}
/*.container-fluid.megamenusip {
width: 1200px;
}*/
.content {
margin: 50px 100px 0px 100px;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
padding-left: 0;
padding-right: 0;
}
.exo-menu {
float: none;
margin: auto;
list-style: none;
position: relative;
}
.exo-menu>li {
display: inline-block;
float: left;
position: relative;
}
.exo-menu>li>a {
color: black;
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.exo-menu>li>a:hover {
color: #23ADF8;
}
.exo-menu i {
float: left;
font-size: 18px;
margin-right: 6px;
line-height: 20px !important;
}
li.drop-down,
.flyout-right,
.flyout-left {
position: relative;
}
li.drop-down:before {
content: "f103";
color: #fff;
font-family: FontAwesome;
font-style: normal;
display: inline;
position: absolute;
right: 6px;
top: 20px;
font-size: 14px;
}
li.drop-down>ul {
left: 0px;
min-width: 230px;
}
.drop-down-ul {
display: none;
}
.flyout-right>ul,
.flyout-left>ul {
top: 0;
min-width: 230px;
display: none;
border-left: 1px solid #365670;
}
li.drop-down>ul>li>a,
.flyout-right ul>li>a,
.flyout-left ul>li>a {
color: #fff;
display: block;
padding: 20px 22px;
text-decoration: none;
background-color: #365670;
border-bottom: 1px dotted #547787;
-webkit-transition: color 0.2s linear, background 0.2s linear;
-moz-transition: color 0.2s linear, background 0.2s linear;
-o-transition: color 0.2s linear, background 0.2s linear;
transition: color 0.2s linear, background 0.2s linear;
}
.flyout-right ul>li>a,
.flyout-left ul>li>a {
border-bottom: 1px dotted #B8C7BC;
}
.flyout-mega-wrap {
top: 0;
right: 0;
left: 100%;
width: 100%;
display: none;
height: 100%;
padding: 15px;
min-width: 742px;
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
}
.flyout-mega ul>li>a {
font-size: 90%;
line-height: 25px;
color: #fff;
font-family: inherit;
}
.flyout-mega ul>li>a:hover,
.flyout-mega ul>li>a:active,
.flyout-mega ul>li>a:focus {
text-decoration: none;
background-color: transparent !important;
color: #ccc !important
}
.animated.fadeIn.mega-menu {
margin-top: 0;
}
.mega-menu {
left: 0;
right: 0;
width: 100vw;
/*display: none;*/
position: fixed;
padding-top: 0;
padding-top: 10px;
}
.mega-menu-wrap {
background-color: white;
}
.mm-mega-menu-wrap {
box-shadow: 3px 3px 10px 0 rgb(206 206 206 / 51%);
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
padding-top: 23px;
}
.mega-menu ul li a {
line-height: 25px;
font-size: 15px;
color: black;
font-weight: 600;
display: block;
}
ul.stander li a {
padding: 3px 0px;
}
ul.description li {
padding-bottom: 12px;
line-height: 8px;
}
ul.description li span {
color: #ccc;
font-size: 85%;
}
a.view-more {
border-radius: 1px;
margin-top: 15px;
background-color: #009FE1;
padding: 2px 10px !important;
line-height: 21px !important;
display: inline-block !important;
}
a.view-more:hover {
color: #fff;
background: #0DADEF;
}
ul.icon-des li a i {
color: #fff;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
background-color: #009FE1;
line-height: 35px !important;
}
ul.icon-des li {
width: 100%;
display: table;
margin-bottom: 11px;
}
/*Blog DropDown*/
.Blog {
left: 0;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Blog .blog-title {
color: #fff;
font-size: 15px;
text-transform: uppercase;
}
.Blog .blog-des {
color: #ccc;
font-size: 90%;
margin-top: 15px;
}
.Blog a.view-more {
margin-top: 0px;
}
/*Images*/
.Images {
left: 0;
width: 100%;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Images h4 {
font-size: 15px;
margin-top: 0px;
text-transform: uppercase;
}
/*common*/
.flyout-right ul>li>a,
.flyout-left ul>li>a,
.flyout-mega-wrap {
background-color: white;
}
/*hover*/
.Blog:hover,
.Images:hover,
.mega-menu:hover,
.drop-down-ul:hover,
li.flyout-left>ul:hover,
li.flyout-right>ul:hover,
.flyout-mega-wrap:hover,
li.flyout-left a:hover+ul,
li.flyout-right a:hover+ul,
.blog-drop-down>a:hover+.Blog,
li.drop-down>a:hover+.drop-down-ul,
.images-drop-down>a:hover+.Images,
.mega-drop-down a:hover+.mega-menu,
li.flyout-mega>a:hover+.flyout-mega-wrap {
display: block;
}
a.toggle-menu {
position: absolute;
right: 10px;
padding: 20px;
font-size: 27px;
color: black;
top: 0px;
transform: rotate(90deg);
margin-top: -13px;
}
.fl-node-5dafd29034e78 {
z-index: 210 !important;
position: relative;
}
.megamenusip,
.mega-menu,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
z-index: 200;
}
.circle_image02 {
opacity: 1.0 !important;
filter: alpha(opacity=50) !important;
/* For IE8 and earlier */
}
.circle_image02:hover {
opacity: 0.5 !important;
filter: alpha(opacity=100) !important;
/* For IE8 and earlier */
}
.mega-menu-wrap li {
margin-bottom: 22px;
padding-right: 30px;
}
.mm-mm-icon {
vertical-align: top;
margin-right: 14px;
width: 32;
height: 32;
}
.mm-mm-subtext {
display: inline-block;
margin-left: 46px;
font-size: 13px;
}
.mega-drop-down>a>span::after {
font-family: 'Font Awesome\ 5 Free';
content: '\f107';
padding-left: 5px;
}
.mega-drop-down>a>span.hover::after {
font-family: 'Font Awesome\ 5 Free';
content: '\f106';
}
.mega-drop-down>a>span.hover,
.mega-drop-down>a:active {
color: #23ADF8;
}
.mm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.mm-grid div:nth-of-type(2) {
padding: 10px 10px 10px 35px;
}
.mm-mm-video {
display: inline-block;
background-color: white;
border: 2px solid #EDEDED;
margin-top: 17px;
padding: 13px;
border-radius: 24px;
height: 47px;
width: 161px;
}
.mm-mm-video:hover {
background-color: #23ADF8;
border-color: #23ADF8;
}
.mm-mm-video a {
color: #23ADF8;
}
.mm-mm-video:hover a {
color: white;
}
.mm-mm-video:hover img {
filter: invert(42%) brightness(180%) contrast(180%);
}
.mega-drop-down a:hover+.mega-menu.hide-block {
display: none;
}
.mm-mm-flyout {
display: inline-block;
width: 100%;
font-size: 15px;
}
.animated.mega-menu {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.mega-menu ul li a:hover {
color: #23ADF8;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.mm-grid {
width: 400px;
max-width: 100%;
}
h4.row.mega-title {
padding-left: 0;
}
.row .col-md-2,
.row .col-md-3,
.row .col-md-4 {
padding-left: 0;
padding-right: 0;
}
#media (min-width: 1349px) {
.fl-node-5dafd29034e79 {
width: 16%;
}
.fl-node-g84bp2nweskf {
width: 3%;
}
}
#media (min-width: 1300px) {
.mega-menu-wrap {
width: 1280px;
margin: auto;
}
}
#media (max-width: 1299px) {
.mega-menu-wrap {
width: 100%;
}
}
#media (min-width: 1252px) {
.exo-menu>li>a {
display: block;
padding: 30px 22px 32px;
}
}
#media (max-width: 1251px) {
.exo-menu>li>a {
padding: 30px 15px 32px;
}
}
#media (max-width: 1199px) {
.mega-menu {
width: 100vw;
}
}
#media (max-width: 1151px) {
.fl-col-group-equal-height .fl-col.fl-node-5dafd77b08a6a {
display: none;
}
}
#media (max-width: 1025px) {
.fl-col-group-equal-height .fl-col.fl-node-5e6078af59549 {
display: none;
}
}
#media (min-width: 992px) {
.exo-menu>li:nth-child(1)>a {
padding-left: 0;
}
.col-md-2 {
width: 16.66666667%;
float: left;
}
.col-md-3 {
width: 25%;
float: left;
padding-left: 0;
}
.col-md-4 {
width: 33.33333333%;
float: left;
}
}
#media (max-width: 991px) {
.empty {
display: none;
}
}
#media (min-width: 789px) and (max-width: 800px) {
.exo-menu>li>a {
padding: 30px 12px 32px;
}
}
#media (min-width: 769px) {
.mm-grid {
margin-bottom: 27px;
}
#mm-button-group {
display: none;
}
}
#media (min-width: 768px) {
.mega-menu,
.flyout-mega-wrap,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
position: fixed;
margin-top: 0;
}
.flyout-right>ul {
left: 100%;
}
.flyout-left>ul {
right: 100%;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
padding: 0 15px;
}
}
.mega-menu.hide-block {
display: none !important;
}
#media (max-width: 768px) {
.fl-builder-content .fl-node-5dafd29034e79 {
width: calc(100vw - 130px) !important;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 130px !important;
}
.fl-builder-content .fl-node-g84bp2nweskf {
display: none;
}
.fl-node-5dafd2ede7f58>.fl-module-content {
margin-left: 0;
}
.exo-menu {
min-height: 58px;
width: 100%;
}
.mega-menu {
padding: 15px;
}
.animated.mega-menu {
padding-left: 22px;
padding-right: 22px;
margin-left: -22px;
margin-right: -22px;
}
.mm-mega-menu-wrap {
box-shadow: none;
}
.mega-menu-wrap {
background-color: transparent;
}
ul.exo-menu.display {
/*width: 100vw;*/
left: 0;
position: relative;
margin-top: 25px;
background-color: white;
min-height: calc(100vh - 238px);
}
a.toggle-menu {
right: 0;
top: 0;
}
.mega-drop-down>a>span::after {
float: right;
padding-right: 6px;
}
.exo-menu.display a.toggle-menu span {
display: none;
}
.exo-menu.display a.toggle-menu {
position: absolute;
right: 21px;
padding: 20px 4px;
font-size: 27px;
margin-top: -70px;
color: #212121;
}
.exo-menu.display a.toggle-menu:hover,
a.toggle-menu:hover {
color: #212121;
}
.exo-menu.display a.toggle-menu:before {
display: block !important;
font-family: 'Font Awesome\ 5 Free';
content: '\f00d';
transform: rotate(90deg);
color: #B2B2B2;
font-weight: 900;
margin-top: 20px;
margin-right: -48px;
}
.exo-menu>li>a {
display: none;
padding: 30px 8px 32px;
}
.exo-menu>li {
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid #EDEDED;
}
.exo-menu>li.mm-li-button {
border-bottom: none;
}
.display.exo-menu>li {
width: calc(100vw - 44px);
display: block;
float: none;
}
.display.exo-menu>li>a {
display: block;
padding: 20px 0;
font-size: 24px;
}
.mega-menu,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
position: relative;
}
.mega-menu {
background-color: #F8F8F8;
}
#menu-item-1225 {
margin-top: -5px;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 40px !important;
}
#see-all-features {
content: url('https://global-site.local/wp-content/uploads/2022/02/what-is-digital-signage-mobile.jpg');
}
#just-4-steps {
content: url('https://global-site.local/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business-mobile.jpg');
}
#mm-button-group {
display: none;
}
#mm-button-group .mm-mm-button a.fl-button {
font-family: Poppins, sans-serif;
font-weight: 600;
font-size: 16px;
border: 1px solid #23ADF8 !important;
background-color: white !important;
background-clip: border-box;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
width: 100%;
text-align: center;
/*margin: 10px 0;*/
}
.fl-page #mm-mm-button-2 .mm-mm-button a.fl-button {
border: 1px solid #EDEDED !important;
}
.fl-page .mm-mm-button a.fl-button span {
color: #23ADF8 !important;
}
#mm-button-group {
position: relative;
bottom: -5px;
list-style-type: none;
padding-left: 0;
width: 100%;
background-color: white;
padding-bottom: 24px;
}
#mm-button-group li {
padding: 10px 0 0 0;
background-color: white;
}
.container-fluid.megamenusip {
display: flex;
flex-direction: column;
flex-wrap: wrap;
position: absolute;
left: 0;
width: 100vw;
min-height: 100vh;
}
h4.row.mega-title {
padding-top: 11px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="header-top">
<div class="container-fluid megamenusip">
<ul class="exo-menu">
<li class="mega-drop-down"><span>Product</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Instant Digital Signage Platform</h4>
<ul class="cabeza">
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-features.svg" alt="features" class="mm-mm-icon" />Features <span class="mm-mm-subtext">See all the features packed into this powerful digital signage platform.</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-templates.svg" alt="templates" class="mm-mm-icon" />Templates <span class="mm-mm-subtext">1000’s of professionally designed templates for every business.</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-how-it-works.svg" alt="templates" class="mm-mm-icon" />How it Works <span class="mm-mm-subtext">Find out how easy it is to get digital signage for your business.</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-industries.svg" alt="templates" class="mm-mm-icon" />Industries <span class="mm-mm-subtext">Digital signage is perfect for any business with tailored solutions.</span></li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get the Player</h4>
<ul class="manos">
<li>Hardware</li>
<li>Player Software</li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">What is Instant Digital Signage?</h4>
<div class="mm-grid">
<div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage.jpg" alt="What is Instant Digital Signage?" style="width: 100%;" id="see-all-features" /></div>
<div><span class="mm-mm-flyout"> Get an overview of how easy it is to get digital signage</span><br />
<button class="mm-mm-video">
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><span>Solutions</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Industries</h4>
<ul class="cabeza">
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hospitality.svg" alt="features" class="mm-mm-icon" />Hospitality <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-retail.svg" alt="templates" class="mm-mm-icon" />Retail <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hair-beauty.svg" alt="templates" class="mm-mm-icon" />Hair & Beauty <span class="mm-mm-subtext">Hair Salons, Nail Salon, Laser…</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="cabeza">
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-medical.svg" alt="features" class="mm-mm-icon" />Medical <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-fitness.svg" alt="templates" class="mm-mm-icon" />Fitness <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-more.svg" alt="templates" class="mm-mm-icon" />More <span class="mm-mm-subtext">We have solutions for all industries…</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">Use Cases</h4>
<ul class="manos">
<li>Digital Menu Boards</li>
<li>Window Signage</li>
<li>In-Store Signage</li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">About Mandoe</h4>
<ul class="manos">
<li>Enterprise</li>
<li>Customers</li>
<li>Partner Program</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><span>Resources</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Learn about the product</h4>
<ul class="cabeza">
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-blog.svg" alt="features" class="mm-mm-icon" />Blog <span class="mm-mm-subtext">Ultimate Guides for getting started, news, updates and much more.</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-case-studies.svg" alt="templates" class="mm-mm-icon" />Case Studies <span class="mm-mm-subtext">See how our customers have found success in their journey with us.</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-help-centre.svg" alt="templates" class="mm-mm-icon" />Help Centre <span class="mm-mm-subtext">Learn how to get started, create content, manage schedules & more.</span></li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get in Touch</h4>
<ul class="manos">
<li>About</li>
<li>Contact</li>
<li>Support</li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">Learn how it works</h4>
<div class="mm-grid">
<div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business.jpg" alt="Just 4 steps to get digital signage for your business" style="width: 100%;" id="just-4-steps" /></div>
<div><span class="mm-mm-flyout">Just 4 steps to get digital signage for your business</span><br />
<button class="mm-mm-video">
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>Pricing</li>
<span>|||</span>
</ul>
<ul id="mm-button-group">
<li class="mm-li-button" id="mm-mm-button-1">
<div class="fl-button-wrap mm-mm-button">
<a href="https://sandbox.mandoemedia.com/signup?origin=mktg_portal" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Start Free Trial</span>
</a>
</div>
</li>
<li class="mm-li-button" id="mm-mm-button-2">
<div class="fl-button-wrap mm-mm-button">
<a href="https://activate.mandoemedia.com" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Log In</span>
</a>
</div>
</li>
</ul>
</div>
</div>

My menu does not display a hamburger icon anymore

After changing some styles, the hamburger icon for mobile phones does not display anymore, how can I bring it back? also what would be the best way to add a little bit more white space above and under the menu but keep the position the same?
HTML:
<input type="checkbox" id="xBxHack" />
<nav id="mainNav" class="mainNav">
<div class="container">
<div class="logo">my<strong>Nav</strong></div>
<label class="navBars" for="xBxHack">
<i class="fa fa-bars"></i>
</label>
<ul id="menu" class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</nav>
CSS:
.mainNav {
background: #fff;
color: #fff;
max-height: 70px;
position: relative;
top:35%;
}
.mainNav a {
text-decoration: none;
}
.mainNav .logo {
display: inline-block;
color: #fff;
font-size: 1.7em;
height: 40px;
line-height: 1.55em;
letter-spacing: -2px;
text-transform: uppercase;
padding: 0 10px;
z-index: 0;
/*POSITION*/
position: relative;
}
.mainNav .logo:hover:before {
background: #292938;
}
.mainNav .logo:before {
content: "";
background: #3C91E6;
z-index: -1;
/*POSITION*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.mainNav .logo a {
color: #efefef;
}
.mainNav .menu {
font-family: 'Montserrat', sans-serif;
text-transform:uppercase;
letter-spacing:5px;
background: #fff;
font-size:10px;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
border-top: 1px solid #fff;
display: none;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
/*POSITION*/
position: absolute;
top: 60px;
right: 0;
left: 0;
}
.mainNav .menu a {
color: #292938;
border-bottom: 1px solid #d9d9d9;
font-weight: bold;
display: block;
padding: 15px;
}
.mainNav .navBars {
display: inline-block;
font-size: 1.7em;
line-height: 1.5em;
float: right;
/*USER SELECTION*/
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
#xBxHack {
visibility: hidden;
opacity: 0;
position: absolute;
top: -99999px;
}
#xBxHack:checked ~ nav .menu {
display: block;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 10px;
}
#media screen and (min-width: 600px) {
.mainNav {
overflow: hidden;
}
.mainNav .navBars {
display: none;
}
.mainNav .container {
padding-top: 0;
padding-bottom: 0;
}
.mainNav .logo {
margin: 10px 0;
}
.mainNav .menu {
display: block;
box-shadow: none;
border: none;
float: right;
/*POSITION*/
position: static;
}
.mainNav .menu li {
display: inline-block;
}
.mainNav .menu a {
border: none;
padding: 20px 10px;
}
}
JS:
$(document).ready(function() {
"use strict";
var myNav = {
init: function() {
this.cacheDOM();
this.browserWidth();
this.bindEvents();
},
cacheDOM: function() {
this.navBars = $(".navBars");
this.xBxHack = $("#xBxHack");
this.navMenu = $("#menu");
},
browserWidth: function() {
$(window).resize(this.bindEvents.bind(this));
},
bindEvents: function() {
var width = window.innerWidth;
if (width < 600) {
this.navBars.click(this.animate.bind(this));
this.navMenu.hide();
this.xBxHack[0].checked = false;
} else {
this.resetNav();
}
},
animate: function(e) {
var checkbox = this.xBxHack[0];
!checkbox.checked ?
this.navMenu.slideDown() :
this.navMenu.slideUp();
},
resetNav: function() {
this.navMenu.show();
}
};
myNav.init();
});
In this jsfiddle you can see that the icon does not appear when the screen is small: https://jsfiddle.net/quehf3x9/

Firstly make sure that you're loading the Font Awesome library. That wasn't being loaded in the JS Fiddle example. So I included a link to a CDN.
Secondly, add a width, height and background color to the CSS for the navbars:
.mainNav .navBars {
width: 30px;
height: 30px;
color: #111;
}
See my updated JS Fiddle for a working example.

You have two problems with your fiddle above. The first is that you did not include the font awesome library. The code does not know what to do with the fa fa-bars classes. To include an external library in jsfiddle:
Find a CDN where the file is hosted
Copy the path to the file
Paste it in the left sidebar in the External Resources section.
Select the + icon to add the resource to the fiddle.
Once the file is loaded, you can see from the developer tools (open the tools by selecting F12) that the class is applied but the icon color is white. You'll want to add some CSS to color the icon such as:
label i {
color: #333;
}
I've made these two changes and updated your fiddle here.

There are two things-
First one you are missing to include Font Awesome library
Secondly the color of icon is white. So you won't be able to see it even if you include the library, changing the color will do the trick <i class="fa fa-bars" style="color:black;"></i>
.mainNav {
background: #fff;
color: #fff;
max-height: 70px;
position: relative;
top:35%;
}
.mainNav a {
text-decoration: none;
}
.mainNav .logo {
display: inline-block;
color: #fff;
font-size: 1.7em;
height: 40px;
line-height: 1.55em;
letter-spacing: -2px;
text-transform: uppercase;
padding: 0 10px;
z-index: 0;
/*POSITION*/
position: relative;
}
.mainNav .logo:hover:before {
background: #292938;
}
.mainNav .logo:before {
content: "";
background: #3C91E6;
z-index: -1;
/*POSITION*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.mainNav .logo a {
color: #efefef;
}
.mainNav .menu {
font-family: 'Montserrat', sans-serif;
text-transform:uppercase;
letter-spacing:5px;
background: #fff;
font-size:10px;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
border-top: 1px solid #fff;
display: none;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
/*POSITION*/
position: absolute;
top: 60px;
right: 0;
left: 0;
}
.mainNav .menu a {
color: #292938;
border-bottom: 1px solid #d9d9d9;
font-weight: bold;
display: block;
padding: 15px;
}
.mainNav .navBars {
display: inline-block;
font-size: 1.7em;
line-height: 1.5em;
float: right;
/*USER SELECTION*/
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
#xBxHack {
visibility: hidden;
opacity: 0;
position: absolute;
top: -99999px;
}
#xBxHack:checked ~ nav .menu {
display: block;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 10px;
}
#media screen and (min-width: 600px) {
.mainNav {
overflow: hidden;
}
.mainNav .navBars {
display: none;
}
.mainNav .container {
padding-top: 0;
padding-bottom: 0;
}
.mainNav .logo {
margin: 10px 0;
}
.mainNav .menu {
display: block;
box-shadow: none;
border: none;
float: right;
/*POSITION*/
position: static;
}
.mainNav .menu li {
display: inline-block;
}
.mainNav .menu a {
border: none;
padding: 20px 10px;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input type="checkbox" id="xBxHack" />
<nav id="mainNav" class="mainNav">
<div class="container">
<div class="logo">my<strong>Nav</strong></div>
<label class="navBars" for="xBxHack">
<i class="fa fa-bars" style="color:black;"></i>
</label>
<ul id="menu" class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</nav>

Why is nav bar sliding down skinny and then widening?

When you hover over a nav li item on my website, it should slide down the nav ul ul item, but when it slides down for some reason it is skinny, then widens after. Please look at my JSFiddle and help me out :D
JSFiddle Demo
HTML:
<body>
<header>
<nav>
<ul>
<li>Home
<ul>
<li>About Me</li>
</ul>
</li>
<li>Purposeful Living
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
<li>Academic Excellence
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
<li>Ethical Responsibility
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
</ul>
</nav>
</header>
<div id="headershow">Toggle Nav Bar</div>
<div id="mainnamesection">
<h1 id="mainname">
Title
</h1>
<div id="flyingsection">
</div>
<h1 id="mainname1">
<span id="smallname">Subtitle</span>
</h1>
</div>
</body>
Javascript/Jquery:
$(document).ready(function() {
$("#smallname").click(function() {
$("html, body").animate({scrollTop: "0px"});
});
$("#headershow").click(function() {
$("header").slideToggle();
});
$(".grades td a").mouseover(function() {
$(this).animate({backgroundColor: "white", color: "black"}, 200);
$(this).mouseleave(function() {
$(this).animate({backgroundColor: "transparent", color: "white"}, 200);
});
});
$('nav li').hover(
function () {
$('ul', this).slideDown();
},
function () {
$('ul', this).stop().slideUp();
}
);
});
CSS:
` #import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
background-image: url(file:///Users/jakesager/Desktop/Websites/Jake%20Sager/img/starrynight.jpg);
background-size: 110%;
background-position: center -100px;
background-attachment: fixed;
margin:0;
padding:0;
}
header {
width: 100%;
margin:auto;
background: rgba(255,255,255,0.7);
height: 60px;
z-index: 20;
display: none;
}
.inline {
display: inline-block;
}
#flyingbird {
height: 60px;
width: 90px;
left: 100px;
position: relative;
top: -30px;
}
#bird {
height: 60px;
width: 90px;
display: inline-block;
position: relative;
top: 15px;
z-index: 1;
}
#flyingsection {
width: 700px;
margin:auto;
margin-top: 0px;
margin-bottom: 0px;
}
nav {
height: 60px;
margin-top: 0px;
text-align: center;
z-index: 20;
}
nav ul ul {
display:none;
}
#headershow {
background-color: rgba(255,255,255,0.7);
position: static;
left: 0;
top: 0;
width: 125px;
text-align:center;
border-bottom-right-radius: 10px;
padding: 5px;
height: 20px;
cursor: pointer;
font-family: open sans;
}
nav ul {
list-style:none;
display: inline-table;
position:relative;
padding: 0;
font-family: open sans;
display: inline-block;
}
nav ul li {
float: left;
margin-top: -16px;
border-right: 2px solid black;
text-align:center;
height: 60px;
padding-left: 25px;
padding-right: 25px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
color:black;
text-decoration: none;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 5px;
padding-right: 5px;
position: relative;
top: 18px;
}
nav ul li:first-child {
border-left: 2px solid black;
}
nav ul li:last-child {
border-right: 2px solid black;
}
nav ul li:hover {
background: rgba(255,255,255,0.6)
}
nav ul ul {
position: absolute;
top: 100%;
z-index: 20;
}
nav ul ul li {
float:none;
background-color: rgba(255,255,255,0.82);
width: 100%;
margin-top: 0;
margin-left: -27px;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 1px solid black;
}
nav ul ul li:last-child {
border-bottom: 2px solid black;
}
nav ul ul li:hover {
background-color: rgba(255,255,255,0.9);
}
#mainnamesection {
width: 1050px;
margin:auto;
}
#mainname {
font-size: 180px;
font-family: open sans;
text-align:center;
margin-top: 20px;
color: white;
}
#mainname1 {
font-size: 180px;
font-family: open sans;
text-align:center;
color: white;
margin-top: -100px;
}
#smallname {
font-size: 50px;
font-family: open sans;
color: #47BCEA;
}
nav ul ul {
margin-left: 0;
}
.maincontent {
width: 100%;
margin-top: 30px;
padding-top: 7px;
padding-bottom: 10px;
color: white;
}
.maincontent p {
font-family: open sans;
margin-left: 20px;
font-size: 18px;
}
.maincontent h1 {
font-family: open sans;
margin-left: 20px;
}
.grades {
margin-left: 20px;
background-color: rgba(000,000,000, 0.7);
font-family: open sans;
font-size: 23px;
}
.grades td {
padding: 10px;
border-right: 2px solid white;
}
.grades td:last-child {
border: none;
}
.grades td a {
width: 100%;
color: white;
text-decoration: none;
padding: 5px;
}
.wrapper {
width: 941px;
margin:auto;
}
.maintitle {
font-family: Open sans;
margin-left: 20px;
}
.mainparagraph {
font-family: Open sans;
margin-left: 20px;
}

During the animation overflow is set to hidden. When animation completes the inline overflow style is removed.
You have negative margin set on sub menu <li> so while the animation is in progress the part that is outside the parent is not visible.
Suggest you remove the negative margin and set the <ul> to left:0