程序员经验分享-hwhale

移动菜单打开和关闭按钮在 Chrome 中显示，但在 Safari 中不显示

2023-12-15

我们的移动菜单在 Pixel 5 上的 Chrome 和 Firefox 中运行良好。

enter image description here

在 iPhone 5s（我唯一的 iPhone）、iPad Mini 2 和较旧的 iPad 上，汉堡菜单打开和关闭图标不显示。

在 Chrome 和 Firefox 以响应模式（移动视口宽度）工作的非视网膜桌面显示器上，Safari 将显示移动菜单打开图标，但不显示关闭图标。

打开的图标是三个旋转90度的管道：|||

关闭图标是一个字体很棒的符号：

.exo-menu.display a.toggle-menu::before {
    display: block !important;
    font-family: 'Font Awesome\ 5 Free';
    content: '\f00d';

我尝试过添加font-weight: 900;没有改变。

使用 Safari 移动检查器，该元素位于正确的位置。

您可以在移动视口中使用下面的代码或在野外查看问题@https://mandoedev.wpengine.com.

如何让移动菜单打开和关闭图标在 Safari 中工作，就像在 Pixel 5 上的 Chrome 和 Firefox 中工作一样？

帮助表示赞赏。

EDIT: pso's answer找到问题的原因，却找不到解决方案。非常感谢有人帮助我解决问题。

$(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>

我已经移动了toggle-menu出于megamenusip。现在它适用于 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>

说明在代码注释中。放在.toggle-menu在您的实际网站代码中的适当级别。一些相关的 CSS 规则a.toggle-menu现在是多余的。我还没有从代码中清除它们。

啊！我发现您已经移动了网站上的切换菜单。我将把答案留给其他人。我的实现有点不同希望它有所帮助。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

safari

mobilesafari

移动菜单打开和关闭按钮在 Chrome 中显示，但在 Safari 中不显示 的相关文章

  • 为什么table-layout:fixed会影响父元素的宽度？

    有人可以解释为什么我的div with table layout fixed正在改变其父元素的宽度 body在本例中 使其在不应该是 100 的情况下达到 100 因为它已经定位了 body border 2px solid red hei

  • 如何缩放 SVG 路径以适应窗口大小？

    我在缩放 SVG 以适应窗口大小时遇到 了麻烦 在这个例子中 我有一个波浪路径和一个文本元素 我想在这里实现的是沿着波浪路径从左到右移动文本元素 这是由GSAP完成的 并停在路径的中间在初始负载下 当用户开始滚动时 它将移至末尾 我的问题是

  • 由于不支持“暂停”命令，Selenium 操作“move_to_element”在 Safari 中不起作用

    在自动化测试期间 下一个命令在 Safari 浏览器上失败 ActionChains driver move to element searchInput perform 例外 InvalidArgumentException 消息 遇到按

  • Bootstrap .row margin-left: -15px - 为什么它会缩进（来自文档）

    我在 Bootstrap 文档中看到了这一行 http getbootstrap com css grid intro http getbootstrap com css grid intro It says 列通过填充创建装订线 列内容之

  • 表格固定标题和第一列 css/html

    我有一个包含大量行和列的表 但我想固定标题和第一列 这是我需要的图片 只有粉色部分必须水平和垂直滚动 但其他部分在滚动过程中必须保持可见 我的表位于 div 中 首先 我应该使用一张桌子还是四张桌子 蓝色桌子 红色桌子 绿色桌子和粉色桌子

  • 设置绝对仓位和保证金

    我想设置一个元素的position to absolute并有一个margin bottom 但似乎margin bottom没有效果 HTML div div CSS container border 1px solid red posi

  • Rails 上的 SASS 无效 CSS 错误

    我正在尝试使用http startbootstrap com stylish portfolio http startbootstrap com stylish portfolio但是 在我的 Rails 应用程序中 我在 vintage

  • Zurb 基金会粘性页脚

    我想使用 Foundation 4 拥有粘性页脚 并且我想使用 HTML5

  • 等高列并将最后一项与底部对齐

    我有一个列表 其中每个li有嵌套容器 我尝试为所有列表项保留相同的高度 并将最后一个 div 推到底部 我将如何使用 flex 来做到这一点 ul list container display inline flex justify con

  • Firefox -moz-border-radius 不会裁剪图像？

    如果设置了图像的边框半径 有谁知道如何让 Firefox 裁剪角 它包含的元素可以正常工作 但我会发现丑陋的角落伸出来 有什么方法可以解决此问题 而无需将图像设置为背景图像或在将其放在网站上之前对其进行处理吗 解决方法 将图像设置为容器元素

  • IE8 - 隐藏 div 内的表单，返回键不再起作用

    我有一个登录表单 位于带有 display none 的 div 中 然后我使用 jquery 淡入表单 但 Enter Return 键不再提交表单 如果我将显示更改为阻止 则效果很好 此问题仅存在于 IE 中 有任何想法吗 这是一个不起

  • JQuery 设置动态最大宽度

    我不太擅长 jQuery 因此完整的代码解决方案将是理想的选择 该函数将 获取浏览器屏幕的 70 宽度 将该宽度转换为其相应的 px 值 设置最大宽度 mainContainer使用从转换 计算中获得的值 这是我要设置的容器的 CSS 样式

  • 单击后按键不会删除过渡

    我认为问题可能出在const 音频 document querySelector audio data key e keyCode const key document querySelector key data key e keyCod

  • 如何使用CSS缩进多级select optgroup？

    只是试图通过嵌套深度缩进 optgroup 块 我尝试了一般margin left规则 嵌套元素然后尝试应用相同的规则 尝试过padding left 这样的缩进可能吗 看起来很简单 P 在下面的示例中 标记为 client2 a 的 op

  • 在问题内显示内联块文本

    我一直在尝试显示内联块 如果我没有在 div 中添加任何内容 一切都会很好 但是当我这样做时 div 会折叠起来 我不知道确切的原因 任何想法 https jsfiddle net giancorzo ebqoptbd https jsfi

  • CSS 边框样式 INSET 或 GROOVE 看起来与 IE9 FF4 或 Safari5 或 Chrome2 非常不同

    抱歉 我是个白痴 但是当我尝试获得某种凹槽效果或插入效果作为边框样式时 我从不同的浏览器中得到了一些非常非常大的视觉结果 使用时 border 5px groove A00 or border 5px inset A00 Firefox 3

  • Chrome 19 无法识别字体粗细：较轻

    我刚刚启动了一个正在开发的项目以进行一些修改 并注意到该声明font weight lighter正在通过以下方式提供服务 font face并且它不再在网站上运行 参见图片 顶部镀铬 底部 ff 自昨晚以来 我的系统 Windows 上没

  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery

  • WordPress 子主题包括包含文件

    我在一家WordPress使用 AMPPS 作为本地主机在我的本地计算机上进行设置 使用 Delta 主题 我创建了一个子主题 delta2 child 初始设置效果很好 但是 我需要更改包含文件夹中名为 home slider php 的

  • 选择子元素但不选择孙元素

    我有以下简化的代码 div p text p div div p text p div div p text p div div p text p div 每当我设置一些值时 content pCSS 文件中的元素 更改也适用于 col1

随机推荐

热门标签