mobile menu open & close buttons display in Chrome but not Safari - css

Question

Our mobile menu works fine in Chrome & Firefox on a Pixel 5.
On an iPhone 5s (the only iPhone I have), an iPad Mini 2 and on an older iPad, the burger menu open & close icons do not show.
On a non-retina desktop display where Chrome & Firefox work in responsive mode (mobile viewport width), Safari will show the mobile menu open icon, but not the close icon.
The open icon is three pipes rotated 90deg: |||
The close icon is a font-awesome symbol:
.exo-menu.display a.toggle-menu::before {
display: block !important;
font-family: 'Font Awesome\ 5 Free';
content: '\f00d';
I've tried adding font-weight: 900; without change.
Using Safari mobile inspector, the element is in the correct position.
You can use the code below in a mobile viewport or see the problem in the wild # https://mandoedev.wpengine.com.
How can I get the mobile menu open & close icons working in Safari the same way they work in Chrome & Firefox on a Pixel 5?
Help appreciated.
EDIT: pso's answer finds the cause of the problem, but not the solution. Would really appreciate someone helping me with the solution.
$(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);
this.scrollIntoView(true); // <---- fix
}
});
$(".toggle-menu").click(function() {
$("#mm-logo").toggleClass("fixed");
$(".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;
}
.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;
}
h4.row.mega-title {
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
}
.animated.fadeIn.mega-menu {
margin-top: 8px;
}
.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: 8px 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 (min-width: 769px) and (max-width: 1251px) {
.animated.fadeIn.mega-menu {
padding-top: 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 !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);
}
a.toggle-menu {
position: fixed;
right: 0;
padding: 8px 20px;
font-size: 27px;
color: black;
top: 14px;
transform: rotate(90deg);
}
.admin-bar a.toggle-menu {
top: 58px;
}
.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;
}
.exo-menu.display a.toggle-menu {
position: fixed;
right: 2px;
padding: 4px 22px;
font-size: 27px;
z-index: 55;
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: 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('https://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage-mobile.jpg');
}
#just-4-steps {
content: url('https://mandoedev.wpengine.com/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: 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;
height: calc(100% - 56px);
padding-left: 0;
padding-right: 0;
justify-content: stretch;
overflow-y: scroll;
}
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;
}
}
<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">
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li></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></div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="bg-white">Pricing</li>
<span>|||</span>
</ul>
<ul id="mm-button-group">
<li class="mm-li-button" id="mm-mm-button-1">
</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>

Answer 1

I've moved the toggle-menu out of the megamenusip. Now it works on safari.
$(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);
this.scrollIntoView(true); // <---- fix
}
});
$(".toggle-menu").click(function() {
$("#mm-logo").toggleClass("fixed");
$(".exo-menu").toggleClass("display");
// adding .fa-times class overrieds fa-bars icon
// so for switching we don't have to hide anything :)
$(".toggle-menu i").toggleClass("fa-times");
$("#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;
}
.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;
}
h4.row.mega-title {
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
}
.animated.fadeIn.mega-menu {
margin-top: 8px;
}
.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: 8px 20px;
font-size: 27px;
color: black;
top: 0px;
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 (min-width: 769px) and (max-width: 1251px) {
.animated.fadeIn.mega-menu {
padding-top: 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 !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;
}
/* hide in normal case*/
.toggle-menu {
display: none;
}
#media (max-width: 768px) {
/* show in small devices */
.toggle-menu {
display: block;
}
#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);
}
a.toggle-menu {
position: fixed;
right: 0;
padding: 8px 20px;
font-size: 27px;
color: black;
top: 14px;
}
.admin-bar a.toggle-menu {
top: 58px;
}
.mega-drop-down,
.bg-white {
background-color: white;
}
.mega-drop-down>a>span::after {
float: right;
padding-right: 6px;
}
a.toggle-menu.display span {
aaadisplay: none;
}
a.toggle-menu:hover {
color: #212121;
}
.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://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage-mobile.jpg');
}
#just-4-steps {
content: url('https://mandoedev.wpengine.com/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: 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;
height: calc(100% - 56px);
padding-left: 0;
padding-right: 0;
justify-content: stretch;
overflow-y: scroll;
}
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;
}
}
<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">
<!-- fontawesome uses <i> element for icons -->
<i class="fa fa-bars"></i>
<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">
<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>
</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">
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li></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></div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="bg-white">Pricing</li>
</ul>
<ul id="mm-button-group">
<li class="mm-li-button" id="mm-mm-button-1">
</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>
Description is in code comments. Put the .toggle-menu at appropriate level in your actual website code. Some CSS rules related to a.toggle-menu are redundant now. I haven't cleaned them from the code.
Ahh! I see you've already moved the toggle-menu on your website. I'll leave the answer for others. My implementation is a little bit different hope it helps.

Answer 2

The property overflow-y: scroll in your div container with the classes container-fluid megamenusip messes with your pseudo element. The content itself has nothing to do with it.

Answer 3

Please try this css in your code
.exo-menu.display a.toggle-menu::before {
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: 'Font Awesome\ 5 Free';
content: '\f00d';
}

Answer 4

container-fluid-megamenusip in this class just remove overflow-y: scroll Propert