Question

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

<Resource name="jdbc/currencyexchange" 
        auth="Container" 
        type="javax.sql.DataSource"
        driverClassName="com.mysql.jdbc.Driver"
        url="jdbc:mysql://${OPENSHIFT_MYSQL_DB_HOST}:${OPENSHIFT_MYSQL_DB_PORT}/${OPENSHIFT_APP_NAME}?autoReconnect=true&amp;useEncoding=true&amp;characterEncoding=UTF-8
        username="xxx"
        password="xxx"
        maxActive="100" maxIdle="30" maxWait="10000"
        />

这是我的网络CSS。我该如何为移动设备修改此功能。

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

Answer 1

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

查看media queries
使用bootstrap
使用％值代替px

Answer 2

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

header-area-wrapper{position: relative;}

希望这会有所帮助。

Answer 3

可以使用 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>

菜单没有出现在手机上？

3 个答案: