html - Bootstrap Hamburger 菜单不显示在 iphone 上，显示在 android 上

Question

我创建了一个汉堡菜单，它显示在所有 Android 平台和平板电脑上，但不显示在 iPhone 上。它也出现在 iPhone 的谷歌“响应式测试仪”上。

我到处寻找答案，尝试更改 css，但没有任何效果。您可以在 https://www.zonnismusic.com 查看该站点.我已经正确安装了 Bootstrap 文件，它们似乎都能正常工作。

此外，这是我第一次提出有关堆栈溢出的问题，因此非常感谢任何关于如何让它变得更好的建议。提前谢谢大家。

    <nav class="navbar navbar-expand-lg w-100 navbarmain">
       <div class="logo"> <img <?php the_custom_logo()?> > </div>
       <button class="navbar-toggler mybutton" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon">
            <div class="container1" onclick="myFunction(this)">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </div>
            </span>
       </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent" >
      <div class="navbar-nav ml-auto" >
      <?php wp_nav_menu(array(
        'theme_location'=>'primary',
        'container'=>false,
        'menu_class'=>'nav custom-nav-items nav-item navbar-nav',
            )
       );?>
       </div>
       </div>
     </nav>


@media only screen and (max-width: 480px) {
.logo {
height:6vh;
margin-top: -23px;
margin-left: -1%;;
position: absolute;
}

.navbarmain {
margin-top: 2vh;
height:10vh;
}
.mybutton {
text-decoration: none;
display: inline-block;
cursor: pointer;
}
.container1 {
margin-top:-5px;
margin-left:70vw;
}
.bar1,.bar2, .bar3  {
height:5px;
width:30px;
}
}

我希望汉堡菜单出现在 iPhone 上。它出现在 android 上，但不是 iphone。没有错误消息。

Answer 1

好吧，我明白了!!!我将我的 .css 应用于 .container1，而我本应将其应用于 .navbar-toggler-icon。