jQuery click to open mega menu + scroll to where click took place

Question

In a mobile viewport, from the menu, when you select 'Product', then scroll down and select 'Solution', the page does not automatically scroll back up to see Solution and the top of its mega menu.

I've tried adjusting the function showMenu(self) by adding:

$([document.documentElement, document.body]).animate({
  scrollTop: $(self).offset().top
}, 500);

however, this edit doesn't change anything.

window.addEventListener('load', () => { 
  document.querySelector(':root').style
    .setProperty('--vh', window.innerHeight/100 + 'px');
})    
window.addEventListener('resize', () => { 
  document.querySelector(':root').style
    .setProperty('--vh', window.innerHeight/100 + 'px');
})

    $(document).ready(function() {
        $(".mega-drop-down").hover(function() {
            if (window.innerWidth > 768) {
            showMenu(this);
            }
        });
    
        $(".mega-drop-down").on("click", function() {
            if (window.innerWidth <= 768) {
            showMenu(this);
            }
        });
        $(".toggle-menu").click(function() {
            $("#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");
        $([document.documentElement, document.body]).animate({
            scrollTop: $(self).offset().top
        }, 500);
        $(".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:before {
    content: "f103";
    color: #fff;
    font-family: FontAwesome;
    font-style: normal;
    display: inline;
    position: absolute;
    right: 6px;
    top: 20px;
    font-size: 14px;
}

li.drop-down>ul {
    left: 0px;
    min-width: 230px;
}

.drop-down-ul {
    display: none;
}

.flyout-right>ul,
.flyout-left>ul {
    top: 0;
    min-width: 230px;
    display: none;
    border-left: 1px solid #365670;
}

.flyout-mega-wrap {
    top: 0;
    right: 0;
    left: 100%;
    width: 100%;
    display: none;
    height: 100%;
    padding: 15px;
    min-width: 742px;
}

h4.row.mega-title {
    color: #838383;
    margin-top: 0px;
    font-size: 15px;
    padding-bottom: 13px;
}

.flyout-mega ul>li>a {
    font-size: 90%;
    line-height: 25px;
    color: #fff;
    font-family: inherit;
}

.animated.fadeIn.mega-menu {
    margin-top: 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;
}

.mega-menu ul li a {
    line-height: 25px;
    font-size: 15px;
    color: black;
    font-weight: 600;
    display: block;
}

/*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);
    }

    .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: -6px;
    }

    .exo-menu>li>a {
        display: none;
        padding: 30px 8px 32px;
    }

    .exo-menu>li {
        margin-left: auto;
        margin-right: auto;
        border-bottom: 1px solid #EDEDED;
    }

    .exo-menu>li.mm-li-button {
        border-bottom: none;
    }

    .display.exo-menu>li {
        width: calc(100vw - 44px);
        display: block;
        float: none;
    }

    .display.exo-menu>li>a {
        display: block;
        padding: 20px 0;
        font-size: 24px;
    }

    .mega-menu,
    .Images,
    .Blog,
    .flyout-right>ul,
    .flyout-left>ul,
    li.drop-down>ul {
        position: relative;
    }

    .mega-menu {
        background-color: #F8F8F8;
    }

    #menu-item-1225 {
        margin-top: -5px;
    }

    .fl-builder-content .fl-node-5dafd29034e7a {
        width: 40px !important;
    }

    #see-all-features {
        content: url('/wp-content/uploads/2022/02/what-is-digital-signage-mobile.jpg');
    }

    #just-4-steps {
        content: url('/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">
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-blog.svg" alt="features" class="mm-mm-icon" />Blog</a> <span class="mm-mm-subtext">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" class="mm-mm-icon" />Case Studies</a> <span class="mm-mm-subtext">See how our customers have found success in their journey with us.</span></li>
                  </ul>
                </div>
                <div class="col-md-3">
                  <h4 class="row mega-title empty">&nbsp;</h4>
                  <ul class="corporal">
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-help-centre.svg" alt="templates" class="mm-mm-icon" />Help Centre</a> <span class="mm-mm-subtext">Learn how to get started, create content, manage schedules &amp; more.</span></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><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business.jpg" alt="Just 4 steps to get digital signage for your business" style="width: 100%;" id="just-4-steps" /></div>
                    <div><span class="mm-mm-flyout">Just 4 steps to get digital signage for your business</span><br />
                      <button class="mm-mm-video">
                      <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="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">
          <div class="fl-button-wrap mm-mm-button">
            <a href="#" target="_self" class="fl-button" role="button">
                            <span class="fl-button-text">Start Free Trial</span>
                    </a>
            </div>
      </li>
      <li class="mm-li-button" id="mm-mm-button-2">
          <div class="fl-button-wrap mm-mm-button">
            <a href="#" target="_self" class="fl-button" role="button">
                            <span class="fl-button-text">Log In</span>
                    </a>
            </div>
      </li>  
    </ul>
  </div>
</div>

Answer 1

You need to use this.scrollIntoView(true) in the click event handler. Which will make the mega-drop-down touch top edge of the viewport.
You can play with the input parameters to get different results.

window.addEventListener('load', () => { 
  document.querySelector(':root').style
    .setProperty('--vh', window.innerHeight/100 + 'px');
})    
window.addEventListener('resize', () => { 
  document.querySelector(':root').style
    .setProperty('--vh', window.innerHeight/100 + 'px');
})

    $(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");
        $([document.documentElement, document.body]).animate({
            scrollTop: $(self).offset().top
        }, 500);
        $(".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:before {
    content: "f103";
    color: #fff;
    font-family: FontAwesome;
    font-style: normal;
    display: inline;
    position: absolute;
    right: 6px;
    top: 20px;
    font-size: 14px;
}

li.drop-down>ul {
    left: 0px;
    min-width: 230px;
}

.drop-down-ul {
    display: none;
}

.flyout-right>ul,
.flyout-left>ul {
    top: 0;
    min-width: 230px;
    display: none;
    border-left: 1px solid #365670;
}

.flyout-mega-wrap {
    top: 0;
    right: 0;
    left: 100%;
    width: 100%;
    display: none;
    height: 100%;
    padding: 15px;
    min-width: 742px;
}

h4.row.mega-title {
    color: #838383;
    margin-top: 0px;
    font-size: 15px;
    padding-bottom: 13px;
}

.flyout-mega ul>li>a {
    font-size: 90%;
    line-height: 25px;
    color: #fff;
    font-family: inherit;
}

.animated.fadeIn.mega-menu {
    margin-top: 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;
}

.mega-menu ul li a {
    line-height: 25px;
    font-size: 15px;
    color: black;
    font-weight: 600;
    display: block;
}

/*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);
    }

    .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: -6px;
    }

    .exo-menu>li>a {
        display: none;
        padding: 30px 8px 32px;
    }

    .exo-menu>li {
        margin-left: auto;
        margin-right: auto;
        border-bottom: 1px solid #EDEDED;
    }

    .exo-menu>li.mm-li-button {
        border-bottom: none;
    }

    .display.exo-menu>li {
        width: calc(100vw - 44px);
        display: block;
        float: none;
    }

    .display.exo-menu>li>a {
        display: block;
        padding: 20px 0;
        font-size: 24px;
    }

    .mega-menu,
    .Images,
    .Blog,
    .flyout-right>ul,
    .flyout-left>ul,
    li.drop-down>ul {
        position: relative;
    }

    .mega-menu {
        background-color: #F8F8F8;
    }

    #menu-item-1225 {
        margin-top: -5px;
    }

    .fl-builder-content .fl-node-5dafd29034e7a {
        width: 40px !important;
    }

    #see-all-features {
        content: url('/wp-content/uploads/2022/02/what-is-digital-signage-mobile.jpg');
    }

    #just-4-steps {
        content: url('/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">
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-blog.svg" alt="features" class="mm-mm-icon" />Blog</a> <span class="mm-mm-subtext">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" class="mm-mm-icon" />Case Studies</a> <span class="mm-mm-subtext">See how our customers have found success in their journey with us.</span></li>
                  </ul>
                </div>
                <div class="col-md-3">
                  <h4 class="row mega-title empty">&nbsp;</h4>
                  <ul class="corporal">
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-help-centre.svg" alt="templates" class="mm-mm-icon" />Help Centre</a> <span class="mm-mm-subtext">Learn how to get started, create content, manage schedules &amp; more.</span></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><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business.jpg" alt="Just 4 steps to get digital signage for your business" style="width: 100%;" id="just-4-steps" /></div>
                    <div><span class="mm-mm-flyout">Just 4 steps to get digital signage for your business</span><br />
                      <button class="mm-mm-video">
                      <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="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">
          <div class="fl-button-wrap mm-mm-button">
            <a href="#" target="_self" class="fl-button" role="button">
                            <span class="fl-button-text">Start Free Trial</span>
                    </a>
            </div>
      </li>
      <li class="mm-li-button" id="mm-mm-button-2">
          <div class="fl-button-wrap mm-mm-button">
            <a href="#" target="_self" class="fl-button" role="button">
                            <span class="fl-button-text">Log In</span>
                    </a>
            </div>
      </li>  
    </ul>
  </div>
</div>