【问题标题】: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】:

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

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

    【讨论】:

      【解决方案3】:

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

      header-area-wrapper{position: relative;}
      

      希望这会有所帮助。

      【讨论】:

      • 试试这个:@media screen and (max-width: 480px) .header-area-wrapper { position: relative !important; }
      猜你喜欢
      • 2020-12-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-09-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多