Steve
Reputation: 1765
Click behaviour interfering with Hover behaviour
On the code copied from the site (below), the symptoms I'm having trouble with don't appear. The symptom (shown in this video) only appear on the live site when clicking on a nav item then hovering over the mega menu.
The other symptom is that sometimes a grey box appears when clicking on a link in the mega menu.
I can't see what is causing these issues on the live site.
Help appreciated.
window.addEventListener('load', () => {
document.querySelector(':root').style
.setProperty('--vh', window.innerHeight/100 + 'px');
})
window.addEventListener('resize', () => {
document.querySelector(':root').style
.setProperty('--vh', window.innerHeight/100 + 'px');
})
;(function($) {
$(function() {
$('.mega-menu-wrap .mm-mm-video a').on('click', function(e) {
e.preventDefault();
$('.fl-node-611604d759de2 .pp-video-image-overlay').trigger('click');
});
});
})(jQuery);
jQuery(document).ready(function() {
jQuery(".mega-drop-down").hover(function() {
if (window.innerWidth > 768) {
showMenu(this);
}
});
jQuery(".mega-drop-down").click(function() {
if (window.innerWidth > 768) {
showMenu(this);
}
});
jQuery(".mega-drop-down").on("click", function() {
if (window.innerWidth <= 768) {
showMenu(this);
this.scrollIntoView(); //{block:nearest}
}
});
jQuery(".toggle-menu").click(function() {
jQuery("#mm-mm-burger").toggleClass("display");
jQuery("#megamenusip").toggleClass("display");
jQuery("#mm-logo").toggleClass("fixed");
jQuery(".exo-menu").toggleClass("display");
jQuery("#mm-button-group").toggle();
jQuery(".mega-menu").addClass("hide-block");
});
});
function showMenu(self) {
jQuery(".mega-menu")
.not(jQuery(self).children(".mega-menu").toggleClass("hide-block"))
.addClass("hide-block");
jQuery(self).find("a span").toggleClass("hover");
jQuery(".exo-menu")
.find("a span")
.not(jQuery(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;
}
.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;
}
.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;
}
.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;
}
.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: block;
margin-left: 46px;
font-size: 13px;
margin-top: -5px;
}
.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,
.row .col-md-6 {
padding-left: 0;
padding-right: 0;
}
@media (min-width: 1359px) {
.exo-menu>li>a {
display: block;
padding: 30px 22px 32px;
}
}
@media (max-width: 1358px) {
.exo-menu>li>a {
padding: 30px 15px 32px;
}
}
@media (min-width: 1252px) and (max-width: 1358px) {
.animated.fadeIn.mega-menu {
margin-top: 32px;
}
}
@media (min-width: 1349px) {
.fl-node-5dafd29034e79 {
width: 16%;
}
.fl-node-g84bp2nweskf {
width: 3.5%;
}
}
@media (min-width: 1340px) {
.mega-menu-wrap {
width: 1278px;
margin: auto;
}
}
@media (max-width: 1339px) {
.mega-menu-wrap {
width: calc(100vw - 80px);
margin: auto;
}
}
@media (max-width: 1251px) {
.exo-menu>li>a {
padding: 30px 15px 32px;
}
}
@media (min-width: 769px) and (max-width: 1251px) {
.animated.fadeIn.mega-menu {
margin-top: 32px;
padding-top: 0;
}
}
@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;
}
.row .col-md-2 {
width: 12%;
margin-right: 3%;
}
.row .col-md-3 {
width: 21.25%;
margin-right: 4%;
float: left;
padding-left: 0;
}
.row .col-md-3:last-of-type {
margin-right: 0;
}
.row .industries .col-md-3 {
width: 20.25%;
margin-right: 5%;
}
.col-md-4 {
width: 33.33333333%;
float: left;
}
.col-md-6 .col-md-6 {
width: 47%;
}
#col-use-cases {
margin-left: 2.5%;
margin-right: 1.5%;
}
}
@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) and (max-width: 788px) {
.exo-menu>li>a {
padding: 30px 13px 32px;
}
}
@media (min-width: 769px) {
.mm-grid {margin-bottom: 27px;}
.mega-menu {background-color: white;}
.mega-menu-wrap {min-height: 306px;}
#mm-button-group {display: none !important;}
}
@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) {
#mm-logo {
position: fixed;
top: 0;
left: 0;
background-color: white;
padding-left: 23px;
}
#mm-logo.fixed {
position: fixed;
top: 0;
background: white;
/*left: 23px;*/
z-index: 55;
}
.admin-bar #mm-logo {
position: fixed;
top: 46px;
}
.fl-page header.fl-builder-content {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.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-module.fl-module-html.fl-node-3p7sb46cwvqu {
/*position: absolute;*/
top: 20px;
}
.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;
}
.animated.fadeIn.mega-menu {
z-index: 0;
}
.mm-mega-menu-wrap {
box-shadow: none;
}
.mega-menu-wrap {
background-color: transparent;
}
ul.exo-menu.display {
left: 0;
top: 0px;
position: relative;
display: flex;
flex: 1;
flex-direction: column;
background-color: white;
min-height: calc((100 * var(--vh)) - 210px);
z-index: 0;
}
.admin-bar ul.exo-menu.display {
min-height: calc(100vh - 256px);
}
.admin-bar a.toggle-menu {
top: 64px;
}
.mega-drop-down,
.bg-white {
background-color: white;
}
.mega-drop-down>a>span::after {
float: right;
padding-right: 6px;
}
.exo-menu.display a.toggle-menu span {
display: none;
}
a.toggle-menu {
position: fixed;
color: black;
top: 8px;
right: 0;
padding: 4px 22px;
font-size: 27px;
z-index: 55;
color: #212121;
}
a.toggle-menu::before {
display: block !important;
font-family: 'Font Awesome\ 5 Free';
content: url("/wp-content/themes/bb-theme-child/images/menu-open.svg");
font-weight: 900;
color: #000000;
}
a.toggle-menu.display::before {
content: url("/wp-content/themes/bb-theme-child/images/menu-close.svg");
color: #B2B2B2;
margin-right: 6px;
}
/*.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: 10px;
margin-right: -10px;
}*/
.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('/wp-content/themes/bb-theme-child/images/what-is-digital-signage-mobile.jpg');
}
#just-4-steps {
content: url('/wp-content/themes/bb-theme-child/images/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: 10px 22px 20px 22px;
/*margin-bottom: 22px;*/
}
#mm-button-group li {
padding: 10px 0 0 0;
background-color: white;
}
.container-fluid.megamenusip {
display: flex;
flex-wrap: wrap;
top: 66px;
position: fixed;
left: 0;
width: 100vw;
padding-left: 0;
padding-right: 0;
justify-content: stretch;
overflow-y: scroll;
}
.container-fluid.megamenusip.display {
height: calc(100% - 56px);
}
header .fl-col-group.fl-col-group-equal-height.fl-col-group-custom-width {
display: -webkit-box;
display: -webkit-flex;
background: white;
position: fixed;
display: -ms-flexbox;
display: flex;
}
h4.row.mega-title {
padding-top: 11px;
}
header .fl-col-group.fl-col-group-equal-height.fl-col-group-custom-width {
display: -webkit-box;
display: -webkit-flex;
background: white;
position: absolute;
display: -ms-flexbox;
display: flex;
}
.container-fluid.megamenusip {
display: flex;
flex-wrap: wrap;
top: 66px;
position: absolute;
left: 0;
width: 100vw;
padding-left: 0;
padding-right: 0;
justify-content: stretch;
overflow-y: scroll;
}
}<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">
<a href="#" id="mm-mm-burger" class="toggle-menu visible-xs-block"></a>
<div class="container-fluid megamenusip">
<ul class="exo-menu">
<li class="mega-drop-down"><a href="#"><span>Product</span></a>
<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><a href="/features/"><img src="https://mandoedev.wpengine.com/wp-content/themes/bb-theme-child/images/icon-features.svg" alt="features" class="mm-mm-icon" />Features</a> <span class="mm-mm-subtext">See all the features packed into this powerful digital signage platform.</span></li>
<li><a href="/templates/"><img src="https://mandoedev.wpengine.com/wp-content/themes/bb-theme-child/images/icon-templates.svg" alt="templates" class="mm-mm-icon" />Templates</a> <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><a href="/how-it-works/"><img src="https://mandoedev.wpengine.com/wp-content/themes/bb-theme-child/images/icon-how-it-works.svg" alt="templates" class="mm-mm-icon" />How it Works</a> <span class="mm-mm-subtext">Find out how easy it is to get digital signage for your business.</span></li>
<li><a href="/industries/"><img src="https://mandoedev.wpengine.com/wp-content/themes/bb-theme-child/images/icon-industries.svg" alt="templates" class="mm-mm-icon" />Industries</a> <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><a href="/hardware/">Hardware</a></li>
<li><a href="/download-player/">Player Software</a></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/themes/bb-theme-child/images/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">
<a href="#"><img src="https://mandoedev.wpengine.com/wp-content/themes/bb-theme-child/images/icon-play.svg" alt="play video" title="play video"> Play Video</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="bg-white"><a href="/pricing/software-only-pricing/">Pricing</a></li>
</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>Upvotes: 0
Views: 54
Answers (1)
the Hutt
Reputation: 18408
- Need to add check for touchscreen:
jQuery(".mega-drop-down").click(function() {
if (window.innerWidth > 768) {
// check if touchscreen
if(window.matchMedia("(pointer: coarse)").matches){
showMenu(this);
}
}
});
Remove above code and click doesn't create issue on wider screens.
Demo:
window.addEventListener('load', () => {
document.querySelector(':root').style
.setProperty('--vh', window.innerHeight/100 + 'px');
})
window.addEventListener('resize', () => {
document.querySelector(':root').style
.setProperty('--vh', window.innerHeight/100 + 'px');
})
;(function($) {
$(function() {
$('.mega-menu-wrap .mm-mm-video a').on('click', function(e) {
e.preventDefault();
$('.fl-node-611604d759de2 .pp-video-image-overlay').trigger('click');
});
});
})(jQuery);
jQuery(document).ready(function() {
jQuery(".mega-drop-down").hover(function() {
if (window.innerWidth > 768) { // hover for wide screens
showMenu(this);
}
});
jQuery(".mega-drop-down").click(function() {
if (window.innerWidth > 768) {
// check if touchscreen
if(window.matchMedia("(pointer: coarse)").matches){
showMenu(this);
}
}
});
jQuery(".mega-drop-down").on("click", function() {
if (window.innerWidth <= 768) { // click for small screens
showMenu(this);
this.scrollIntoView(); //{block:nearest}
}
});
jQuery(".toggle-menu").click(function() {
jQuery("#mm-mm-burger").toggleClass("display");
jQuery("#megamenusip").toggleClass("display");
jQuery("#mm-logo").toggleClass("fixed");
jQuery(".exo-menu").toggleClass("display");
jQuery("#mm-button-group").toggle();
jQuery(".mega-menu").addClass("hide-block");
});
});
function showMenu(self) {
jQuery(".mega-menu")
.not(jQuery(self).children(".mega-menu").toggleClass("hide-block"))
.addClass("hide-block");
jQuery(self).find("a span").toggleClass("hover");
jQuery(".exo-menu")
.find("a span")
.not(jQuery(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;
}
.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;
}
.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;
}
.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;
}
.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: block;
margin-left: 46px;
font-size: 13px;
margin-top: -5px;
}
.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,
.row .col-md-6 {
padding-left: 0;
padding-right: 0;
}
@media (min-width: 1359px) {
.exo-menu>li>a {
display: block;
padding: 30px 22px 32px;
}
}
@media (max-width: 1358px) {
.exo-menu>li>a {
padding: 30px 15px 32px;
}
}
@media (min-width: 1252px) and (max-width: 1358px) {
.animated.fadeIn.mega-menu {
margin-top: 32px;
}
}
@media (min-width: 1349px) {
.fl-node-5dafd29034e79 {
width: 16%;
}
.fl-node-g84bp2nweskf {
width: 3.5%;
}
}
@media (min-width: 1340px) {
.mega-menu-wrap {
width: 1278px;
margin: auto;
}
}
@media (max-width: 1339px) {
.mega-menu-wrap {
width: calc(100vw - 80px);
margin: auto;
}
}
@media (max-width: 1251px) {
.exo-menu>li>a {
padding: 30px 15px 32px;
}
}
@media (min-width: 769px) and (max-width: 1251px) {
.animated.fadeIn.mega-menu {
margin-top: 32px;
padding-top: 0;
}
}
@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;
}
.row .col-md-2 {
width: 12%;
margin-right: 3%;
}
.row .col-md-3 {
width: 21.25%;
margin-right: 4%;
float: left;
padding-left: 0;
}
.row .col-md-3:last-of-type {
margin-right: 0;
}
.row .industries .col-md-3 {
width: 20.25%;
margin-right: 5%;
}
.col-md-4 {
width: 33.33333333%;
float: left;
}
.col-md-6 .col-md-6 {
width: 47%;
}
#col-use-cases {
margin-left: 2.5%;
margin-right: 1.5%;
}
}
@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) and (max-width: 788px) {
.exo-menu>li>a {
padding: 30px 13px 32px;
}
}
@media (min-width: 769px) {
.mm-grid {margin-bottom: 27px;}
.mega-menu {background-color: white;}
.mega-menu-wrap {min-height: 306px;}
#mm-button-group {display: none !important;}
}
@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) {
#mm-logo {
position: fixed;
top: 0;
left: 0;
background-color: white;
padding-left: 23px;
}
#mm-logo.fixed {
position: fixed;
top: 0;
background: white;
/*left: 23px;*/
z-index: 55;
}
.admin-bar #mm-logo {
position: fixed;
top: 46px;
}
.fl-page header.fl-builder-content {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.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-module.fl-module-html.fl-node-3p7sb46cwvqu {
/*position: absolute;*/
top: 20px;
}
.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;
}
.animated.fadeIn.mega-menu {
z-index: 0;
}
.mm-mega-menu-wrap {
box-shadow: none;
}
.mega-menu-wrap {
background-color: transparent;
}
ul.exo-menu.display {
left: 0;
top: 0px;
position: relative;
display: flex;
flex: 1;
flex-direction: column;
background-color: white;
min-height: calc((100 * var(--vh)) - 210px);
z-index: 0;
}
.admin-bar ul.exo-menu.display {
min-height: calc(100vh - 256px);
}
.admin-bar a.toggle-menu {
top: 64px;
}
.mega-drop-down,
.bg-white {
background-color: white;
}
.mega-drop-down>a>span::after {
float: right;
padding-right: 6px;
}
.exo-menu.display a.toggle-menu span {
display: none;
}
a.toggle-menu {
position: fixed;
color: black;
top: 8px;
right: 0;
padding: 4px 22px;
font-size: 27px;
z-index: 55;
color: #212121;
}
a.toggle-menu::before {
display: block !important;
font-family: 'Font Awesome\ 5 Free';
content: url("/wp-content/themes/bb-theme-child/images/menu-open.svg");
font-weight: 900;
color: #000000;
}
a.toggle-menu.display::before {
content: url("/wp-content/themes/bb-theme-child/images/menu-close.svg");
color: #B2B2B2;
margin-right: 6px;
}
/*.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: 10px;
margin-right: -10px;
}*/
.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('/wp-content/themes/bb-theme-child/images/what-is-digital-signage-mobile.jpg');
}
#just-4-steps {
content: url('/wp-content/themes/bb-theme-child/images/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: 10px 22px 20px 22px;
/*margin-bottom: 22px;*/
}
#mm-button-group li {
padding: 10px 0 0 0;
background-color: white;
}
.container-fluid.megamenusip {
display: flex;
flex-wrap: wrap;
top: 66px;
position: fixed;
left: 0;
width: 100vw;
padding-left: 0;
padding-right: 0;
justify-content: stretch;
overflow-y: scroll;
}
.container-fluid.megamenusip.display {
height: calc(100% - 56px);
}
header .fl-col-group.fl-col-group-equal-height.fl-col-group-custom-width {
display: -webkit-box;
display: -webkit-flex;
background: white;
position: fixed;
display: -ms-flexbox;
display: flex;
}
h4.row.mega-title {
padding-top: 11px;
}
header .fl-col-group.fl-col-group-equal-height.fl-col-group-custom-width {
display: -webkit-box;
display: -webkit-flex;
background: white;
position: absolute;
display: -ms-flexbox;
display: flex;
}
.container-fluid.megamenusip {
display: flex;
flex-wrap: wrap;
top: 66px;
position: absolute;
left: 0;
width: 100vw;
padding-left: 0;
padding-right: 0;
justify-content: stretch;
overflow-y: scroll;
}
}<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">
<a href="#" id="mm-mm-burger" class="toggle-menu visible-xs-block"></a>
<div class="container-fluid megamenusip">
<ul class="exo-menu">
<li class="mega-drop-down"><a href="#"><span>Product</span></a>
<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><a href="/features/"><img src="https://mandoedev.wpengine.com/wp-content/themes/bb-theme-child/images/icon-features.svg" alt="features" class="mm-mm-icon" />Features</a> <span class="mm-mm-subtext">See all the features packed into this powerful digital signage platform.</span></li>
<li><a href="/templates/"><img src="https://mandoedev.wpengine.com/wp-content/themes/bb-theme-child/images/icon-templates.svg" alt="templates" class="mm-mm-icon" />Templates</a> <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><a href="/how-it-works/"><img src="https://mandoedev.wpengine.com/wp-content/themes/bb-theme-child/images/icon-how-it-works.svg" alt="templates" class="mm-mm-icon" />How it Works</a> <span class="mm-mm-subtext">Find out how easy it is to get digital signage for your business.</span></li>
<li><a href="/industries/"><img src="https://mandoedev.wpengine.com/wp-content/themes/bb-theme-child/images/icon-industries.svg" alt="templates" class="mm-mm-icon" />Industries</a> <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><a href="/hardware/">Hardware</a></li>
<li><a href="/download-player/">Player Software</a></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/themes/bb-theme-child/images/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">
<a href="#"><img src="https://mandoedev.wpengine.com/wp-content/themes/bb-theme-child/images/icon-play.svg" alt="play video" title="play video"> Play Video</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="bg-white"><a href="/pricing/software-only-pricing/">Pricing</a></li>
</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>- The flashing gray when page loads may be because your scripts are executing while HTML is being parsed:
There are too many script embedded all over the html. Execute the scripts that belong to components that are not visible immediately(i.e. which users have to scroll down to see), after entire document loads. For example you can render carousels, after everything has been loaded and rendered.
- javascript-async-defer this article will help you how to load those script tags at various stages.
- Or window onload event can be used to execute such heavy and out of view scripts.
- I don't have much knowledge about wordpress but this may help https://kinsta.com/blog/defer-parsing-of-javascript/
Upvotes: 1
Related Questions
- jQuery: Issues with combined click and hover functions
- jquery hover only works on click event?
- Hover only works once before an element is clicked on
- How do you get hover and click to play well together in jquery?
- jquery hover and click conflict
- JQuery click and hover function not working correctly
- jQuery .click doesn't work when also using .hover , how can I fix this?
- JQuery and strange behavior on hover function
- Odd jQuery hover behavior
- hover() and click() not playing well together