菜单没有出现在手机上？答案

【问题标题】：menu does not appear on mobile?菜单没有出现在手机上？
【发布时间】：2015-10-15 09:34:52
【问题描述】：

当我在移动设备中打开我的网站时，菜单栏被图层滑块隐藏。此外，徽标应该出现在标题上，但不是。

.header-wrapper{ background-color:#0073ff; position: relative;
height: 60px;
}

div.title-item-wrapper h2.title-item-header{ color: #0073ff; }

.logo-wrapper{ padding-top:2px; }

h3.gdl-header-title{ color:#0073ff; }

div.package-search-select{ padding-right: 21px; }

a.gdl-button.small{ padding: 10px 10px 10px 10px; font-size: 14px;
}

这是我的网页 CSS。我怎样才能为移动设备修改它。

这是我的网站http://185.105.4.132/~zen/

【问题讨论】：

标签： jquery html css mobile menubar

【解决方案1】：

响应式菜单栏可以使用 Bootstrap 框架来完成。演示

https://jsfiddle.net/DhwaniSanghvi/novgts5c/

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
        <div class="pull-left"><img src="http://185.105.4.132/~zen/wp-content/uploads/2015/10/Zen-Logo-Small13.png"></div>
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
   <span class="fa fa-bars"></span>     
      </button>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav navbar-right">
       <li><a href="#">Home</a></li>
       <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Map</a></li>
      </ul>
    </div>
  </div>
</nav>

【讨论】：

是的.. 我知道。但是我如何在wordpress中安装它。我是否在 wp-content 中上传引导程序？并且有很多 index.php 文件，我应该选择哪个文件来编辑标记。对不起，我对此有点新手。
blog.teamtreehouse.com/… 这是如何在woodpress中制作响应式主题或布局的完整指南

【解决方案2】：

要使您的网页适应移动设备，您可以做一些事情

看看media queries
使用像bootstrap这样的框架
使用 % 值代替 px

【讨论】：

【解决方案3】：

问题是幻灯片覆盖在菜单上。对于移动添加

header-area-wrapper{position: relative;}

希望这会有所帮助。

【讨论】：

试试这个：@media screen and (max-width: 480px) .header-area-wrapper { position: relative !important; }