1

Our mobile menu works fine in Chrome & Firefox on a Pixel 5.

enter image description here

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"><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="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/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="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/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">&nbsp;</h4>
                  <ul class="corporal">
                    <li><a href="#"><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</a> <span class="mm-mm-subtext">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" 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</a></li>
                    <li><a href="#">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/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"><a href="#"><span>Solutions</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">Industries</h4>
                  <ul class="cabeza">
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hospitality.svg" alt="features" class="mm-mm-icon" />Hospitality</a> <span class="mm-mm-subtext">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" class="mm-mm-icon" />Retail</a> <span class="mm-mm-subtext">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" class="mm-mm-icon" />Hair &amp; Beauty</a> <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">&nbsp;</h4>
                  <ul class="cabeza">
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-medical.svg" alt="features" class="mm-mm-icon" />Medical</a> <span class="mm-mm-subtext">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" class="mm-mm-icon" />Fitness</a> <span class="mm-mm-subtext">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" class="mm-mm-icon" />More</a> <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><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 class="col-md-3">
                  <h4 class="row mega-title">About Mandoe</h4>
                  <ul class="manos">
                    <li><a href="#">Enterprise</a></li>
                    <li><a href="#">Customers</a></li>
                    <li><a href="#">Partner Program</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="mega-drop-down"><a href="#"><span>Resources</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">Learn about the product</h4>
                  <ul class="cabeza">
                  </ul>
                </div>
                <div class="col-md-3">
                  <h4 class="row mega-title empty">&nbsp;</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><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Support</a></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"><a href="/pricing/software-only-pricing/">Pricing</a></li>
      <a href="#" class="toggle-menu visible-xs-block"><span>|||</span></a>
    </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>
Steve
  • 2,066
  • 13
  • 60
  • 115
  • 1
    You need to take `.toggle-menu` out of `megamenusip`. Fontawesome has the [horizontal bars](https://fontawesome.com/icons/bars?s=solid) icon. – the Hutt Mar 14 '22 at 12:59
  • Thanks, @theHutt, add an answer if you like? – Steve Mar 15 '22 at 05:46

4 Answers4

1

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.

pso
  • 513
  • 1
  • 16
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 -->
  <a href="#" class="toggle-menu visible-xs-block"><i class="fa fa-bars"></i></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="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/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="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/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">&nbsp;</h4>
                  <ul class="corporal">
                    <li>
                      <a href="#"><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</a> <span class="mm-mm-subtext">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" 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</a></li>
                    <li><a href="#">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/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"><a href="#"><span>Solutions</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">Industries</h4>
                  <ul class="cabeza">
                    <li>
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hospitality.svg" alt="features" class="mm-mm-icon" />Hospitality</a> <span class="mm-mm-subtext">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" class="mm-mm-icon" />Retail</a> <span class="mm-mm-subtext">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" class="mm-mm-icon" />Hair &amp; Beauty</a> <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">&nbsp;</h4>
                  <ul class="cabeza">
                    <li>
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-medical.svg" alt="features" class="mm-mm-icon" />Medical</a> <span class="mm-mm-subtext">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" class="mm-mm-icon" />Fitness</a> <span class="mm-mm-subtext">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" class="mm-mm-icon" />More</a> <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><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 class="col-md-3">
                  <h4 class="row mega-title">About Mandoe</h4>
                  <ul class="manos">
                    <li><a href="#">Enterprise</a></li>
                    <li><a href="#">Customers</a></li>
                    <li><a href="#">Partner Program</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="mega-drop-down"><a href="#"><span>Resources</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">Learn about the product</h4>
                  <ul class="cabeza">
                  </ul>
                </div>
                <div class="col-md-3">
                  <h4 class="row mega-title empty">&nbsp;</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><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Support</a></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"><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">
      </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.

the Hutt
  • 16,980
  • 2
  • 14
  • 44
  • I think I have a final problem [here](https://stackoverflow.com/questions/71523858/how-to-scroll-vertically-through-a-mega-menu-on-mobile), if you wouldn't mind helping? It's a CSS `overflow-y: scroll` issue on mobile. – Steve Mar 18 '22 at 07:52
0

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';
}
Nikhil27bYt
  • 19
  • 1
  • 5
  • Thanks, Nikhil, pso's answer revealed the cause of the problem. Unsure how to solve it. – Steve Mar 14 '22 at 07:04
0

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

Aman Kumar Sharma
  • 26
  • 3