When the viewport is 768px or less, we want the a.mega-drop-down links to open on click, rather than on hover as it is for desktop.
The problem is the first click doesn't do anything.
Only subsequent clicks do something.
How do we make the first click on a.mega-drop-down function in the mobile viewport the same way subsequent clicks do?
You will need to adjust the code preview viewport down to 768px or below to avoid the desktop hover effect taking place.
Help appreciated.
$(document).ready(function () {
/*$(".mega-drop-down").hover(function() {
if(window.innerWidth >= 769) {
$(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").click(function() {
if(window.innerWidth <= 768) {
$('.mega-menu').not($(this).children('.mega-menu').toggle()).hide();
$(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');
});
}); 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;
}
.row {
margin-right: 0;
margin-left: 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*/
.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: 14px;
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
}
/*mega menu*/
.mega-menu {
left: 0;
right: 0;
padding: 15px;
width: 100vw;
display: none;
position: fixed;
padding-top: 0;
box-shadow: 3px 3px 10px 0 rgb(206 206 206 / 51%);
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 14px;
padding-bottom: 13px;
padding-top: 15px;
}
.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, .mega-menu {
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: -15px;
}
.logosip {
padding: 0 !important;
margin-top: -7px !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 200px !important;
height: 25px !important;
max-width: 210px !important;
max-height: 30px !important;
border: 1.5px transparent !important;
border-radius: 1.2em;
background-color: transparent !important;
}
.megamenusip, .mega-menu, .Images, .Blog, .flyout-right > ul, .flyout-left > ul, li.drop-down > ul {
z-index: 2000;
}
/* opacidad */
.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 */
}
/* Fin */
.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: FontAwesome;
content: '\f107';
padding-left: 5px;
}
.mega-drop-down > a > span.hover::after {
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;}
.mm-mm-video {
display: inline-block;
background-color: white;
border: 2px solid #EDEDED;
margin-top: 10px;
padding: 13px;
border-radius: 24px;
}
.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%);
}
@media (min-width: 1300px) {
.mega-menu-wrap {
width: 1300px;
margin: auto;
}
}
@media (max-width: 1299px) {
.mega-menu-wrap {
width: 100%;
}
}
@media (max-width: 1199px) {
.mega-menu {
width: 100vw;
}
}
@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) {
.container-fluid {padding-left: 0; padding-right: 0;}
.mm-grid {width: 400px; max-width: 100%;}
h4.row.mega-title {padding-left: 0;}
.empty {display: none;}
}
@media (min-width:768px) {
.exo-menu > li > a {
display: block;
padding: 35px 22px;
}
.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%;
}
}
@media (max-width:768px) {
.exo-menu {
min-height: 58px;
width: 100%;
}
ul.exo-menu.display {
width: 100vw;
left: 0;
position: absolute;
margin-top: 40px;
background-color: white;
}
.exo-menu.display a.toggle-menu {
margin-top: -69px;
}
.exo-menu > li > a {
width: 100%;
display: none;
}
.exo-menu > li {
width: 100%;
}
.display.exo-menu > li > a {
display: block;
padding: 20px 30px;
font-size: 24px;
}
.mega-menu, .Images, .Blog, .flyout-right > ul, .flyout-left > ul, li.drop-down > ul {
position: relative;
}
.mega-menu {
background-color: #F8F8F8;
}
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<div >
<ul >
<li ><a href="#"><span>Product</span></a>
<div >
<div >
<div >
<div >
<h4 >Instant Digital Signage Platform</h4>
<ul >
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-features.svg" alt="features" />Features</a>
<span >See all the features packed into this powerful digital signage platform.</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-templates.svg" alt="templates" />Templates</a>
<span >1000’s of professionally designed templates for every business.</span></li>
</ul>
</div>
<div >
<h4 > </h4>
<ul >
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-how-it-works.svg" alt="templates" />How it Works</a>
<span >Find out how easy it is to get digital signage for your business.</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-industries.svg" alt="templates" />Industries</a>
<span >Digital signage is perfect for any business with tailored solutions.</span></li>
</ul>
</div>
<div >
<h4 >Get the Player</h4>
<ul >
<li><a href="#">Hardware</a></li>
<li><a href="#">Player Software</a></li>
</ul>
</div>
<div >
<h4 >What is Instant Digital Signage?</h4>
<div >
<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%;"/></div>
<div><span style="display: inline-block; width: 100%;"></span> Get an overview of how easy it is to get digital signage<br />
<button ><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video</a></button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li ><a href="#"><span>Solutions</span></a>
<div >
<div >
<div >
<div >
<h4 >Industries</h4>
<ul >
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hospitality.svg" alt="features" />Hospitality</a>
<span >Cafe, Restaurant, Fast Food…</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-retail.svg" alt="templates" />Retail</a>
<span >Cafe, Restaurant, Fast Food…</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hair-beauty.svg" alt="templates" />Hair & Beauty</a>
<span >Hair Salons, Nail Salon, Laser…</span></li>
</ul>
</div>
<div >
<h4 > </h4>
<ul >
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-medical.svg" alt="features" />Medical</a>
<span >Cafe, Restaurant, Fast Food…</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-fitness.svg" alt="templates" />Fitness</a>
<span >Cafe, Restaurant, Fast Food…</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-more.svg" alt="templates" />More</a>
<span >We have solutions for all industries…</span></li>
</ul>
</div>
<div >
<h4 >Use Cases</h4>
<ul >
<li><a href="#">Digital Menu Boards</a></li>
<li><a href="#">Window Signage</a></li>
<li><a href="#">In-Store Signage</a></li>
</ul>
</div>
<div >
<h4 >About Mandoe</h4>
<ul >
<li><a href="#">Enterprise</a></li>
<li><a href="#">Customers</a></li>
<li><a href="#">Partner Program</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li ><a href="#"><span>Resources</span></a>
<div >
<div >
<div >
<div >
<h4 >Learn about the product</h4>
<ul >
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-blog.svg" alt="features" />Blog</a>
<span >Ultimate Guides for getting started, news, updates and much more.</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-case-studies.svg" alt="templates" />Case Studies</a>
<span >See how our customers have found success in their journey with us.</span></li>
</ul>
</div>
<div >
<h4 > </h4>
<ul >
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-help-centre.svg" alt="templates" />Help Centre</a>
<span >Learn how to get started, create content, manage schedules & more.</span></li>
</ul>
</div>
<div >
<h4 >Get in Touch</h4>
<ul >
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
<div >
<h4 >Learn how it works</h4>
<div >
<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%;"/></div>
<div><span style="display: inline-block; width: 100%;"></span> Just 4 steps to get digital signage for your business<br />
<button ><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video</a></button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li><a href="#"></i>Pricing</a></li>
<a href="#" >|||</a>
</ul>
</div>
</div>CodePudding user response：
I added .mega-drop-down>a{pointer-events: none; } inside media query to prevent click and use toggleClass('hide-block') instead of hide() method for mega-menu element hide/show and few lines change in style for adding .hover class only for below 768px screen and in script I changed something like hide() method to removeClass() and toggle() to toggleClass().
I hope below snippet will help you a lot.
$(document).ready(function () {
$('.toggle-menu').on('click', function () {
$('.exo-menu').toggleClass('display');
});
$(".mega-drop-down").on('click', function () {
if (window.innerWidth <= 768) {
$('.mega-menu').not($(this).children('.mega-menu').toggleClass('hide-block')).removeClass('hide-block');
$(this).find('a span').toggleClass('hover');
$('.exo-menu').find('a span').not($(this).find('a span')).removeClass('hover');
}
});
});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;
}
.row {
margin-right: 0;
margin-left: 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*/
.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: 14px;
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
}
/*mega menu*/
.mega-menu {
left: 0;
right: 0;
padding: 15px;
width: 100vw;
display: none;
position: fixed;
padding-top: 0;
box-shadow: 3px 3px 10px 0 rgb(206 206 206 / 51%);
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 14px;
padding-bottom: 13px;
padding-top: 15px;
}
.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, .mega-menu {
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: -15px;
display: none;
}
.logosip {
padding: 0 !important;
margin-top: -7px !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 200px !important;
height: 25px !important;
max-width: 210px !important;
max-height: 30px !important;
border: 1.5px transparent !important;
border-radius: 1.2em;
background-color: transparent !important;
}
.megamenusip, .mega-menu, .Images, .Blog, .flyout-right > ul, .flyout-left > ul, li.drop-down > ul {
z-index: 2000;
}
/* opacidad */
.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 */
}
/* Fin */
.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: FontAwesome;
content: '\f107';
padding-left: 5px;
}
.mega-drop-down > a:active {color: #23ADF8;}
@media (max-width: 768px) {
.mega-drop-down > a > span.hover::after {
content: '\f106';
}
.mega-drop-down > a > span.hover{color: #23ADF8;}
}
.mm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.mm-grid div:nth-of-type(2) {padding: 10px;}
.mm-mm-video {
display: inline-block;
background-color: white;
border: 2px solid #EDEDED;
margin-top: 10px;
padding: 13px;
border-radius: 24px;
}
.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%);
}
@media (min-width: 1300px) {
.mega-menu-wrap {
width: 1300px;
margin: auto;
}
}
@media (max-width: 1299px) {
.mega-menu-wrap {
width: 100%;
}
}
@media (max-width: 1199px) {
.mega-menu {
width: 100vw;
}
}
@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) {
.container-fluid {padding-left: 0; padding-right: 0;}
.mm-grid {width: 400px; max-width: 100%;}
h4.row.mega-title {padding-left: 0;}
.empty {display: none;}
}
@media (min-width:768px) {
.exo-menu > li > a {
display: block;
padding: 35px 22px;
}
.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%;
}
}
@media (max-width:768px) {
.exo-menu {
min-height: 58px;
width: 100%;
}
ul.exo-menu.display {
width: 100vw;
left: 0;
position: absolute;
margin-top: 40px;
background-color: white;
}
.exo-menu.display a.toggle-menu {
margin-top: -69px;
}
.exo-menu > li > a {
width: 100%;
display: none;
}
.exo-menu > li {
width: 100%;
}
.display.exo-menu > li > a {
display: block;
padding: 20px 30px;
font-size: 24px;
}
.mega-menu, .Images, .Blog, .flyout-right > ul, .flyout-left > ul, li.drop-down > ul {
position: relative;
}
.mega-menu {
background-color: #F8F8F8;
}
/* new addon */
a.toggle-menu {
display: block;
}
.mega-drop-down>a{
pointer-events: none;
}
.mega-menu.hide-block{
display: block;
}
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<div >
<ul >
<li ><a href="#"><span>Product</span></a>
<div >
<div >
<div >
<div >
<h4 >Instant Digital Signage Platform</h4>
<ul >
<li><a href="#"><img
src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-features.svg"
alt="features" />Features</a>
<span >See all the features packed into this powerful
digital signage platform.</span>
</li>
<li><a href="#"><img
src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-templates.svg"
alt="templates" />Templates</a>
<span >1000’s of professionally designed templates for
every business.</span>
</li>
</ul>
</div>
<div >
<h4 > </h4>
<ul >
<li><a href="#"><img
src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-how-it-works.svg"
alt="templates" />How it Works</a>
<span >Find out how easy it is to get digital signage for
your business.</span>
</li>
<li><a href="#"><img
src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-industries.svg"
alt="templates" />Industries</a>
<span >Digital signage is perfect for any business with
tailored solutions.</span>
</li>
</ul>
</div>
<div >
<h4 >Get the Player</h4>
<ul >
<li><a href="#">Hardware</a></li>
<li><a href="#">Player Software</a></li>
</ul>
</div>
<div >
<h4 >What is Instant Digital Signage?</h4>
<div >
<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%;" /></div>
<div><span style="display: inline-block; width: 100%;"></span> Get an overview of
how easy it is to get digital signage<br />
<button ><a href="#"><img
src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg"
alt="play video" title="play video"> Play Video</a></button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li ><a href="#"><span>Solutions</span></a>
<div >
<div >
<div >
<div >
<h4 >Industries</h4>
<ul >
<li><a href="#"><img
src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hospitality.svg"
alt="features" />Hospitality</a>
<span >Cafe, Restaurant, Fast Food…</span>
</li>
<li><a href="#"><img
src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-retail.svg"
alt="templates" />Retail</a>
<span >Cafe, Restaurant, Fast Food…</span>
</li>
<li><a href="#"><img
src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hair-beauty.svg"
alt="templates" />Hair & Beauty</a>
<span >Hair Salons, Nail Salon, Laser…</span>
</li>
</ul>
</div>
<div >
<h4 > </h4>
<ul >
<li><a href="#"><img
src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-medical.svg"
alt="features" />Medical</a>
<span >Cafe, Restaurant, Fast Food…</span>
</li>
<li><a href="#"><img
src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-fitness.svg"
alt="templates" />Fitness</a>
<span >Cafe, Restaurant, Fast Food…</span>
</li>
<li><a href="#"><img
src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-more.svg"
alt="templates" />More</a>
<span >We have solutions for all industries…</span>
</li>
</ul>
</div>
<div >
<h4 >Use Cases</h4>
<ul >
<li><a href="#">Digital Menu Boards</a></li>
<li><a href="#">Window Signage</a></li>
<li><a href="#">In-Store Signage</a></li>
</ul>
</div>
<div >
<h4 >About Mandoe</h4>
<ul >
<li><a href="#">Enterprise</a></li>
<li><a href="#">Customers</a></li>
<li><a href="#">Partner Program</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li ><a href="#"><span>Resources</span></a>
<div >
<div >
<div >
<div >
<h4 >Learn about the product</h4>
<ul >
<li><a href="#"><img
src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-blog.svg"
alt="features" />Blog</a>
<span >Ultimate Guides for getting started, news, updates
and much more.</span>
</li>
<li><a href="#"><img
src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-case-studies.svg"
alt="templates" />Case Studies</a>
<span >See how our customers have found success in their
journey with us.</span>
</li>
</ul>
</div>
<div >
<h4 > </h4>
<ul >
<li><a href="#"><img
src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-help-centre.svg"
alt="templates" />Help Centre</a>
<span >Learn how to get started, create content, manage
schedules & more.</span>
</li>
</ul>
</div>
<div >
<h4 >Get in Touch</h4>
<ul >
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
<div >
<h4 >Learn how it works</h4>
<div >
<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%;" /></div>
<div><span style="display: inline-block; width: 100%;"></span> Just 4 steps to get
digital signage for your business<br />
<button ><a href="#"><img
src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg"
alt="play video" title="play video"> Play Video</a></button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li><a href="#"></i>Pricing</a></li>
</ul>
<a href="#" >|||</a>
</div>
</div>