Question

我创建了一个汉堡菜单，它显示在所有android平台和键盘上，但未显示在iphone上。它还会出现在Google的iPhone“响应测试器”上。

我一直在寻找并寻找答案，尝试更改CSS，但是没有任何效果。您可以访问https://www.zonnismusic.com来访问该站点。我已经正确安装了引导程序文件，它们似乎都可以正常工作。

此外，这是我第一次问到堆栈溢出问题，因此，我对如何改善它的任何建议将不胜感激。谢谢大家。

    <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。

Bootstrap Hamburger菜单未在iPhone上显示，在Android上显示

1 个答案: