Javascript hamburger menu won't stay open

Javascript hamburger menu won't stay open - javascript

I'm trying to build a sidebar collapsible menu. The goal is to display #sidenav whenever the user clicks on the hamburger menu, and close the #sidenav if the user clicks outside of the menu while the menu is open.
Right now I'm running into an issue where the part of the script that closes the sidenav menu, window.onclick, is being fired whenever the user clicks on the hamburger icon which essentially closing the menu before it can ever open. What am I doing wrong? What is keeping the menu from functioning as I am intending?
var mininav = true;
var sidenav = document.getElementById("sidenav");
function toggleSidenav() {
if (mininav) {
sidenav.style.width = "300px";
this.mininav = false;
} else {
sidenav.style.width = "0px";
this.mininav = true;
}
}
window.onclick = function(event) {
if (mininav == false) {
if (event.target != sidenav) {sidenav.style.width = "0px";}
}
}
nav {
z-index: 10;
display: flex;
align-items: center;
position: fixed;
top: 0; left: 0;
width: 100vw; height: 65px;
font-size: x-large;
font-family: 'Noto Sans JP', sans-serif;
background-color: white;
border-bottom: 1px solid lightgray}
/* -------- [MAIN NAV] -------- */
.mainnav ul {
margin: 0;
margin-left: 250px;
padding: 0;
overflow: hidden;
list-style-type: none}
.mainnav li {float: left}
.mainnav li:hover {background-color: #F6F6F6; border-bottom: 1px solid purple}
.mainnav li a {
display: block;
text-decoration: none;
text-align: center;
color: #5F6368;
font-size: 20px;
padding: 21px 20px;}
/* -------- [SIDE NAV] -------- */
.sidenav .container {
z-index: 11;
position: absolute;
top: 0; left: 0;
width: 0px; height: 100vh;
transition: 0.5s;
background-color: white;
border-right: 1px solid lightgray;
box-shadow: 10px 0px 4px -10px rgba(0,0,0,0.51);}
.sidenav .top, .sidenav .classes {
width: 100%;
padding: 8px 0px;}
.sidenav .top {border-bottom: 1px solid lightgray}
.container ul {
margin: 0;
padding: 0;
overflow: hidden;
list-style-type: none}
.container li {width: 95%}
.container li a {
display: block;
text-decoration: none;
color: #5F6368;
font-size: 20px;
padding: 21px 20px;
margin-bottom: 10px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;}
.container li a:hover {background-color: #F2F2F2}
.container li a.active {background-color: #EEEEEE}
/* -------- [MISC SETTINGS] -------- */
.profilepic {margin-right: 15px}
.small-pic img{width: 20px;}
.medium-pic img{width: 40px;}
.hamburger {margin-left: 15px}
.hamburger .line {
width: 22px;
height: 2px;
background-color: darkgray;
margin: 6px 0;}
.is-left {float: left;}
.is-right {margin-left: auto; order: 2;}
.is-circle {clip-path: circle();}
<nav>
<div class='sidenav'>
<div class='hamburger is-left' onclick='toggleSidenav()'>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
</div>
<div id='sidenav' class='container'>
<div class='top'>
<ul>
<li><a href=''>Main Menu</a></li>
</ul>
</div>
<div class='classes'>
<ul>
<li><a class='active' href=''>Class One</a></li>
<li><a href=''>Class Two</a></li>
<li><a href=''>Class Three</a></li>
</ul>
</div>
</div>
</div>
<div class='mainnav'>
<ul>
<li><a href=''>Dash</a></li>
<li><a href=''>Grades</a></li>
<li><a href=''>Tasks</a></li>
<li><a href=''>Skills</a></li>
</ul>
</div>
<div class='profilepic medium-pic is-circle is-right'>
<img src='https://classcolonies.com/resources/pics/students/68.jpg'>
</div>
</nav>

This works for me:
var isToggled = false;
var sidenav = document.getElementById("sidenav");
function toggleSidenav() {
if (!isToggled) {
sidenav.style.width = "300px";
} else {
sidenav.style.width = "0px";
}
isToggled = !isToggled;
}
window.onclick = function(event) {
if (isToggled && !event.target.classList.contains('hamburger') && !event.target.classList.contains('line')) {
toggleSidenav();
}
}
nav {
z-index: 10;
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 65px;
font-size: x-large;
font-family: 'Noto Sans JP', sans-serif;
background-color: white;
border-bottom: 1px solid lightgray
}
/* -------- [MAIN NAV] -------- */
.mainnav ul {
margin: 0;
margin-left: 250px;
padding: 0;
overflow: hidden;
list-style-type: none
}
.mainnav li {
float: left
}
.mainnav li:hover {
background-color: #F6F6F6;
border-bottom: 1px solid purple
}
.mainnav li a {
display: block;
text-decoration: none;
text-align: center;
color: #5F6368;
font-size: 20px;
padding: 21px 20px;
}
/* -------- [SIDE NAV] -------- */
.sidenav .container {
z-index: 11;
position: absolute;
top: 0;
left: 0;
width: 0px;
height: 100vh;
transition: 0.5s;
background-color: white;
border-right: 1px solid lightgray;
box-shadow: 10px 0px 4px -10px rgba(0, 0, 0, 0.51);
}
.sidenav .top,
.sidenav .classes {
width: 100%;
padding: 8px 0px;
}
.sidenav .top {
border-bottom: 1px solid lightgray
}
.container ul {
margin: 0;
padding: 0;
overflow: hidden;
list-style-type: none
}
.container li {
width: 95%
}
.container li a {
display: block;
text-decoration: none;
color: #5F6368;
font-size: 20px;
padding: 21px 20px;
margin-bottom: 10px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
}
.container li a:hover {
background-color: #F2F2F2
}
.container li a.active {
background-color: #EEEEEE
}
/* -------- [MISC SETTINGS] -------- */
.profilepic {
margin-right: 15px
}
.small-pic img {
width: 20px;
}
.medium-pic img {
width: 40px;
}
.hamburger {
margin-left: 15px
}
.hamburger .line {
width: 22px;
height: 2px;
background-color: darkgray;
margin: 6px 0;
}
.is-left {
float: left;
}
.is-right {
margin-left: auto;
order: 2;
}
.is-circle {
clip-path: circle();
}
<nav>
<div class='sidenav'>
<div class='hamburger is-left' onclick='toggleSidenav()'>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
</div>
<div id='sidenav' class='container'>
<div class='top'>
<ul>
<li><a href=''>Main Menu</a></li>
</ul>
</div>
<div class='classes'>
<ul>
<li><a class='active' href=''>Class One</a></li>
<li><a href=''>Class Two</a></li>
<li><a href=''>Class Three</a></li>
</ul>
</div>
</div>
</div>
<div class='mainnav'>
<ul>
<li><a href=''>Dash</a></li>
<li><a href=''>Grades</a></li>
<li><a href=''>Tasks</a></li>
<li><a href=''>Skills</a></li>
</ul>
</div>
<div class='profilepic medium-pic is-circle is-right'>
<img src='https://classcolonies.com/resources/pics/students/68.jpg'>
</div>
</nav>

Your code is correct but it was not working because of Event Bubbling.
When you click on child element, the event gets propagated.
You can learn more about it What is event bubbling and capturing?.
I added code event.stopPropagation();, now it is working.
var mininav = true;
var sidenav = document.getElementById("sidenav");
function toggleSidenav(event) {
if (mininav) {
sidenav.style.width = "300px";
this.mininav = false;
} else {
sidenav.style.width = "0px";
this.mininav = true;
}
event.stopPropagation();
}
window.onclick = function(event) {
if (mininav == false) {
if (event.target != sidenav) {sidenav.style.width = "0px";}
}
}
nav {
z-index: 10;
display: flex;
align-items: center;
position: fixed;
top: 0; left: 0;
width: 100vw; height: 65px;
font-size: x-large;
font-family: 'Noto Sans JP', sans-serif;
background-color: white;
border-bottom: 1px solid lightgray}
/* -------- [MAIN NAV] -------- */
.mainnav ul {
margin: 0;
margin-left: 250px;
padding: 0;
overflow: hidden;
list-style-type: none}
.mainnav li {float: left}
.mainnav li:hover {background-color: #F6F6F6; border-bottom: 1px solid purple}
.mainnav li a {
display: block;
text-decoration: none;
text-align: center;
color: #5F6368;
font-size: 20px;
padding: 21px 20px;}
/* -------- [SIDE NAV] -------- */
.sidenav .container {
z-index: 11;
position: absolute;
top: 0; left: 0;
width: 0px; height: 100vh;
transition: 0.5s;
background-color: white;
border-right: 1px solid lightgray;
box-shadow: 10px 0px 4px -10px rgba(0,0,0,0.51);}
.sidenav .top, .sidenav .classes {
width: 100%;
padding: 8px 0px;}
.sidenav .top {border-bottom: 1px solid lightgray}
.container ul {
margin: 0;
padding: 0;
overflow: hidden;
list-style-type: none}
.container li {width: 95%}
.container li a {
display: block;
text-decoration: none;
color: #5F6368;
font-size: 20px;
padding: 21px 20px;
margin-bottom: 10px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;}
.container li a:hover {background-color: #F2F2F2}
.container li a.active {background-color: #EEEEEE}
/* -------- [MISC SETTINGS] -------- */
.profilepic {margin-right: 15px}
.small-pic img{width: 20px;}
.medium-pic img{width: 40px;}
.hamburger {margin-left: 15px}
.hamburger .line {
width: 22px;
height: 2px;
background-color: darkgray;
margin: 6px 0;}
.is-left {float: left;}
.is-right {margin-left: auto; order: 2;}
.is-circle {clip-path: circle();}
<nav>
<div class='sidenav'>
<div class='hamburger is-left' onclick='toggleSidenav(event)'>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
</div>
<div id='sidenav' class='container'>
<div class='top'>
<ul>
<li><a href=''>Main Menu</a></li>
</ul>
</div>
<div class='classes'>
<ul>
<li><a class='active' href=''>Class One</a></li>
<li><a href=''>Class Two</a></li>
<li><a href=''>Class Three</a></li>
</ul>
</div>
</div>
</div>
<div class='mainnav'>
<ul>
<li><a href=''>Dash</a></li>
<li><a href=''>Grades</a></li>
<li><a href=''>Tasks</a></li>
<li><a href=''>Skills</a></li>
</ul>
</div>
<div class='profilepic medium-pic is-circle is-right'>
<img src='https://classcolonies.com/resources/pics/students/68.jpg'>
</div>
</nav>

Related

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>

Drop down menus hover, but sub menus don't

Hi I've tried searching for this but just can't find the right coding. Can someone help?
This is my site currently in test mode : http://www.rockclick.co.uk/wiss/index.htm .
As you can see I have hoverable menus. But my sub menus under the "Galleries" hover menu don't hover I have to click on them in my PC browser (google chrome). On my iphone the submenus aren't even clickable. (I've added a script to fix the hover bug for IOS).
I'm very reluctant to re-write the whole thing again. Is there an easy fix to just make my sub menus hoverable??
I'm very much a novice at this stuff so any help would be greatly appreciated.
document.addEventListener('click', function(e) {
e = e || window.event;
console.log(e);
var target = e.target || e.srcElement;
console.log(target);
if (target.parentElement.className.indexOf('has-submenu') > -1) {
e.target.classList.toggle('open');
}
}, false);
<!----------------ios-hover-fix----------->
(function(l){var i,s={touchend:function(){}};for(i in s)l.addEventListener(i,s)})(document); // sticky hover fix in iOS
<style>
#menu {background: #F9F3DB; color: #6D6C6B; height: 35px; border-bottom: 0px solid #6D6C6B}
#menu ul,
#menu li {margin: 0 0; padding: 0 0; list-style: none}
#menu ul {height: 35px}
#menu li {float: left; display: inline; position: relative; font: bold 12px Arial; text-shadow: 0 0px 0 #6D6C6B; border-right: 0px solid #444;
border-left: 0px solid #111; text-transform: uppercase}
#menu li:first-child {border-left: none}
#menu a {display: block; line-height: 35px; padding: 0 14px; text-decoration: none; color: #6D6C6B;}
#menu li:hover > a,
#menu li a:hover {background: #F9F3DB}
#menu input { display: none; margin: 0 0; padding: 0 0; width: 80px; height: 35px; opacity: 0; cursor: pointer}
#menu label {font: bold 30px Arial; display: none; width: 35px; height: 36px; line-height: 36px; text-align: center}
#menu label span {font-size: 12px; position: absolute; left: 35px}
#menu ul.menus {height: auto; width: auto; background: #F9F3DB; position: absolute; z-index: 99; display: none; border: 0;}
#menu ul.menus li {display: block; width: 100%; font: 12px Arial; text-transform: none;}
#menu li:hover ul.menus {display: block}
#menu a.home {background: #c00;}
#menu a.prett {padding: 0 27px 0 14px}
#menu a.prett::after {
content: "";
width: 0;
height: 0;
border-width: 5px 6px;
border-style: solid;
border-color: #6D6C6B transparent transparent transparent;
position: absolute;
top: 15px;
right: 9px}
#menu a.prett.open::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: transparent transparent #6D6C6B transparent;
position: absolute;
top: 9px;
right: 9px}
#menu ul.menus a:hover {background: #F9F3DB;}
#menu ul.menus .submenu {display: none; position: absolute; left: 100px; background: #F9F3DB; top: 0; width: 150px;}
#menu ul.menus .submenu li {background: #F9F3DB;}
#menu ul.menus .has-submenu a.open ~ .submenu {display: block;}
</style>
<!------------NAVIGATION-BAR------>
<body>
<nav>
<ul id='menu'>
<li><a class='prett' href='#' title='Galleries'>Galleries</a>
<ul class='menus'>
<li class='has-submenu'><a class='prett' title='Photos'>Photos</a>
<ul class='submenu'>
<li>2017</li>
<li>2016</li>
<li>2015</li>
</ul></li>
<li class='has-submenu'><a class='prett' title='Archives'>Media</a>
<ul class='submenu'>
<li>Press Reports</li>
<li>Archived Press</li>
</ul></li>
<li><a href="team photos.htm" target="iframe" title='Team Photos'>Team Photos</a></li>
<li><a href="videos.htm" target="iframe" title='Videos'>Videos</a></li>
</ul></li>
</nav>
</body>

Consider declaring an additional :hover state rule for nested submenu elements, this can be chained onto the existing submenu :hover state rule, e.g:
#menu li:hover ul.menus, #menu li.has-submenu:hover ul.submenu {
display: block;
}
Code Snippet Demonstration:
document.addEventListener('click', function(e) {
e = e || window.event;
console.log(e);
var target = e.target || e.srcElement;
console.log(target);
if (target.parentElement.className.indexOf('has-submenu') > -1) {
e.target.classList.toggle('open');
}
}, false);
<!----------------ios-hover-fix----------->
(function(l) {
var i, s = {
touchend: function() {}
};
for (i in s) l.addEventListener(i, s)
})(document); // sticky hover fix in iOS
#menu {
background: #F9F3DB;
color: #6D6C6B;
height: 35px;
border-bottom: 0px solid #6D6C6B
}
#menu ul,
#menu li {
margin: 0 0;
padding: 0 0;
list-style: none
}
#menu ul {
height: 35px
}
#menu li {
float: left;
display: inline;
position: relative;
font: bold 12px Arial;
text-shadow: 0 0px 0 #6D6C6B;
border-right: 0px solid #444;
border-left: 0px solid #111;
text-transform: uppercase
}
#menu li:first-child {
border-left: none
}
#menu a {
display: block;
line-height: 35px;
padding: 0 14px;
text-decoration: none;
color: #6D6C6B;
}
#menu li:hover>a,
#menu li a:hover {
background: #F9F3DB
}
#menu input {
display: none;
margin: 0 0;
padding: 0 0;
width: 80px;
height: 35px;
opacity: 0;
cursor: pointer
}
#menu label {
font: bold 30px Arial;
display: none;
width: 35px;
height: 36px;
line-height: 36px;
text-align: center
}
#menu label span {
font-size: 12px;
position: absolute;
left: 35px
}
#menu ul.menus {
height: auto;
width: auto;
background: #F9F3DB;
position: absolute;
z-index: 99;
display: none;
border: 0;
}
#menu ul.menus li {
display: block;
width: 100%;
font: 12px Arial;
text-transform: none;
}
#menu li:hover ul.menus, #menu li.has-submenu:hover ul.submenu {
display: block
}
#menu a.home {
background: #c00;
}
#menu a.prett {
padding: 0 27px 0 14px
}
#menu a.prett::after {
content: "";
width: 0;
height: 0;
border-width: 5px 6px;
border-style: solid;
border-color: #6D6C6B transparent transparent transparent;
position: absolute;
top: 15px;
right: 9px
}
#menu a.prett.open::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: transparent transparent #6D6C6B transparent;
position: absolute;
top: 9px;
right: 9px
}
#menu ul.menus a:hover {
background: #F9F3DB;
}
#menu ul.menus .submenu {
display: none;
position: absolute;
left: 100px;
background: #F9F3DB;
top: 0;
width: 150px;
}
#menu ul.menus .submenu li {
background: #F9F3DB;
}
#menu ul.menus .has-submenu a.open~.submenu {
display: block;
}
<!------------NAVIGATION-BAR------>
<body>
<nav>
<ul id='menu'>
<li>Home</li>
<li>News</li>
<li><a class='prett' href='#' title='Info'>Information</a>
<ul class='menus'>
<li>About Us</li>
<li>Statistics</li>
<li>Downloads</li>
<li>Sponsorship</li>
<li>Race Calendar</li>
<li>Race Results</li>
</ul>
</li>
<li><a class='prett' href='#' title='Info'>Meet The Team</a>
<ul class='menus'>
<li>The Team</li>
<li>The Coaches</li>
<li>The Committee</li>
</ul>
</li>
<li><a class='prett' href='#' title='Galleries'>Galleries</a>
<ul class='menus'>
<li class='has-submenu'><a class='prett' title='Photos'>Photos</a>
<ul class='submenu'>
<li>2017</li>
<li>2016</li>
<li>2015</li>
</ul>
</li>
<li class='has-submenu'><a class='prett' title='Archives'>Media</a>
<ul class='submenu'>
<li>Press Reports</li>
<li>Archived Press</li>
</ul>
</li>
<li><a href="team photos.htm" target="iframe" title='Team Photos'>Team Photos</a></li>
<li><a href="videos.htm" target="iframe" title='Videos'>Videos</a></li>
<li class='has-submenu'><a class='prett' title='Archives'>Archives</a>
<ul class='submenu'>
<li>1980's</li>
<li>1990's</li>
<li>2000's</li>
</ul>
</li>
</ul>
</li>
<li>Contact Us</li>
<li>Links</li>
</ul>
</nav>
</body>

Add the following line to your CSS code. It should fix it.
.menus li a:hover ~ .submenu {display: block !important;}

How can change the position of logo in this Navigation bar?

Ok guys so i have this template with me. But i can't figure out how to shift the position of logo to left and the menu accordingly. I also want to change the background color to white.. I'm able to do the rest of the changes myself..
$(document).ready(function() {
/* MAIN MENU */
$('#main-menu > li:has(ul.sub-menu)').addClass('parent');
$('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent');
$('#menu-toggle').click(function() {
$('#main-menu').slideToggle(300);
return false;
});
$(window).resize(function() {
if ($(window).width() > 700) {
$('#main-menu').removeAttr('style');
}
});
});
a {
color: #23dbdb;
text-decoration: none;
}
a:hover {
color: #000;
}
ol, ul {
list-style: none;
padding:0px;
margin:0px;
}
#wrap {
margin: 0 auto;
}
.inner {
margin: 0 auto;
max-width: 940px;
padding: 0 40px;
}
.relative {
position: relative;
}
.right {
float: right;
}
.left {
float: left;
}
/* HEADER */
#wrap > header {
background-color: #333;
padding-bottom: 20px;
}
.logo {
display: inline-block;
font-size: 0;
padding-top: 15px;
}
#navigation {
position: absolute;
right: 40px;
bottom: 0px;
}
#menu-toggle {
display: none;
float: right;
}
/* HEADER > MENU */
#main-menu {
float: right;
font-size: 0;
margin: 10px 0;
}
#main-menu > li {
display: inline-block;
margin-left: 30px;
padding: 2px 0;
}
#main-menu > li.parent {
background-image: url(../images/plus-gray.png);
background-size: 7px 7px;
background-repeat: no-repeat;
background-position: left center;
}
#main-menu > li.parent > a {
padding-left: 14px;
}
#main-menu > li > a {
color: #eee;
font-size: 14px;
line-height: 14px;
padding: 30px 0;
text-decoration: none;
}
#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
color: #23dbdb;
}
/* HEADER > MENU > DROPDOWN */
#main-menu li {
position: relative;
}
ul.sub-menu { /* level 2 */
display: none;
left: 0px;
top: 38px;
padding-top: 10px;
position: absolute;
width: 150px;
z-index: 9999;
}
ul.sub-menu ul.sub-menu { /* level 3+ */
margin-top: -1px;
padding-top: 0;
left: 149px;
top: 0px;
}
ul.sub-menu > li > a {
background-color: #333;
border: 1px solid #444;
border-top: none;
color: #bbb;
display: block;
font-size: 12px;
line-height: 15px;
padding: 10px 12px;
}
ul.sub-menu > li > a:hover {
background-color: #2a2a2a;
color: #fff;
}
ul.sub-menu > li:first-child {
border-top: 3px solid #23dbdb;
}
ul.sub-menu ul.sub-menu > li:first-child {
border-top: 1px solid #444;
}
ul.sub-menu > li:last-child > a {
border-radius: 0 0 2px 2px;
}
ul.sub-menu > li > a.parent {
background-image: url(../images/arrow.png);
background-size: 5px 9px;
background-repeat: no-repeat;
background-position: 95% center;
}
#main-menu li:hover > ul.sub-menu {
display: block; /* show the submenu */
}
The CSS Responsive Style
#media all and (max-width: 700px) {
#navigation {
position: static;
margin-top: 20px;
}
#menu-toggle {
display: block;
}
#main-menu {
display: none;
float: none;
}
#main-menu li {
display: block;
margin: 0;
padding: 0;
}
#main-menu > li {
margin-top: -1px;
}
#main-menu > li:first-child {
margin-top: 0;
}
#main-menu > li > a {
background-color: #333;
border: 1px solid #444;
color: #bbb;
display: block;
font-size: 14px;
padding: 12px !important;
padding: 0;
}
#main-menu li > a:hover {
background-color: #444;
}
#main-menu > li.parent {
background: none !important;
padding: 0;
}
#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
border: 1px solid #444 !important;
color: #fff !important;
}
ul.sub-menu {
display: block;
margin-top: -1px;
margin-left: 20px;
position: static;
padding: 0;
width: inherit;
}
ul.sub-menu > li:first-child {
border-top: 1px solid #444 !important;
}
ul.sub-menu > li > a.parent {
background: #333 !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<header>
<div class="inner relative">
<a class="logo" href="https://www.freshdesignweb.com"><img src="images/logo.png" alt="fresh design web"></a>
<a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a>
<nav id="navigation">
<ul id="main-menu">
<li class="current-menu-item">Home</li>
<li class="parent">
Features
<ul class="sub-menu">
<li><i class="icon-wrench"></i> Elements</li>
<li><i class="icon-credit-card"></i> Pricing Tables</li>
<li><i class="icon-gift"></i> Icons</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li class="parent">
Blog
<ul class="sub-menu">
<li>Large Image</li>
<li>Medium Image</li>
<li>Masonry</li>
<li>Double Sidebar</li>
<li>Single Post</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
</div>

At first you have to change for web view bellow css code for left position for nav. Also logo should be remove otherwise logo & menu overlap if you want to logo is left position.
#navigation {
position: absolute;
left: 40px;
bottom: 0px;
}
Also you want to change your menu bar background color then change to this css code
#wrap > header {
background-color: #fff;
}
Note: If you do that you should be change your menu font color like black otherwise your font menu font color & menu background color looking messy.

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

keep submenu on top and keep contents of div from moving around and size

I am following up on this question and answer:
Sub-menu expanding parent div instead of displaying on top
If there is a div below the menu in the example above, how do you keep 1) that div contents from moving around, and 2) the size of the div from moving around, yet keep it responsive?
For example I forked the js fiddle from the link above and created the div id="mytest". I'd like the menu and the "mytest" div to be completely independent when you hover over the "About Me" link. Here is my fork: http://jsfiddle.net/nXqn8/
Here is the code:
<div id="menu">
<ul>
<li><a id="" class="" href="">Home</a></li>
<li><a id="" class="" href="">About Me</a>
<ul class="sub-menu">
<li>Biography</li>
<li>Photo Galery</li>
<li>Foot Print</li>
</ul>
</li>
<li><a id="" class="" href="">Expertise</a></li>
<li><a id="" class="" href="">Projects</a>
<ul class="sub-menu">
<li>Geo 228 Portal</li>
<li>NEP Application</li>
<li>Geo Address Book</li>
<li>Assets Management</li>
</ul>
</li>
<li><a id="" class="" href="">Contact</a></li>
</ul>
</div>
<div id="mytest"> xxxxxxxxxxxxxxxxxxxxxxxxxx Please stop me from moving around!!! xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </div>
css:
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #666666;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
overflow: visible;
z-index: 2;
height: 35px;
}
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
}
#menu li {
display: block;
width: 120px;
float: left;
border-right: 1px solid #999;
z-index: 4;
}
#menu a {
color: #ffffff;
font-weight: bold;
display: block;
text-align: center;
text-decoration: none;
text-transform: uppercase;
margin: 0;
padding: 10px 20px;
}
#menu a:hover {
color: #000000;
margin: 5px 10px;
padding: 5px 10px;
background-color: #C0C0C0;
border-radius: 10px;
}
#menu ul.sub-menu {
display: none;
position: relative;
}
#menu ul.sub-menu li {
width: 200px;
background-color: #C0C0C0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #666666;
}
#menu ul.sub-menu li a {
color: #000;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
}
#menu ul.sub-menu li a:hover {
color: snow;
background-color: #666666;
}
#menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
#mytest {
background-color: red;
}
Ultimately, I have after something like the main menus you see at the top of accenture dot com.
Thanks!

#menu li {
position:relative;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
}
#mytest {
float:left;
background-color: red;
width:100%;
text-align: center;
}
DEMO

Define your #menu li position: relative and define your sub menu #menu ul.sub-menu position: absolute; left: 0; top: 100%;
as this css
#menu li {
position:relative;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
}
Demo

We Keep Coding

JavaScript is the programming language of the Web.

Javascript hamburger menu won't stay open - javascript

Related

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

Drop down menus hover, but sub menus don't

How can change the position of logo in this Navigation bar?

Why is nav bar sliding down skinny and then widening?

keep submenu on top and keep contents of div from moving around and size

Categories

Resources