Question

我正在开发一个网站，我面临一个小问题。网站的顶部导航栏可以很好地工作到特定的屏幕分辨率。但是，如果我调整浏览器窗口（尺寸较小），导航栏就会消失。如果我在Ipad上查看网站，同样的问题也会持续存在。我无法弄清楚导航菜单的CSS代码出了什么问题。

我已将网站上传到测试服务器

http://bcklight.hostoi.com/

HTML代码

<section id="start" class="start">
       <div id="section-nav" class="section-nav">
          <div class="container">
            <ul class="nav">
              <li><a href="#start" id="link-start">Home</a></li>
              <li><a href="#process" id="link-process">Product&amp;Services</a></li>
              <li><a href="#portfolio" id="link-portfolio">Work</a></li>
              <li><a href="#team" id="link-company">Company</a></li>
              <li><a href="#contact" id="link-contact">Contact</a></li>
              <li><a href="fn/index.html">Fi</a>&nbsp;|&nbsp;<a href="index.html">En</a></li>
            </ul>
          </div>
        </div>

CSS代码

.container{
    margin:0 auto;
    max-width:960px;
    padding:0 5%;
    width:90%
    }

.section-nav{
    background:#FFFFFF;
    -webkit-box-shadow:0 0 5px #111;
    -moz-box-shadow:0 0 5px #111;
    box-shadow:0 0 5px #111;
    color:#838383;
    display:none;
    font:800 .688em "proxima-nova",sans-serif;
    letter-spacing:.3em;height:31px;line-height:31px;
    position:absolute;
    text-align:center;
    text-transform:uppercase;
    top:0;
    width:100%;
    z-index:9999
    }

.section-nav.fixed{
    position:fixed
    }

.section-nav ul{
    clear:both;
    list-style:none;
    margin:0;
    padding:0
    }

.section-nav li{
    display:inline-block;
    padding:0 3%
    }

.section-nav li.active a{
    color:#f7e442;
    text-decoration:none
    }

.section-nav a{
    -webkit-transition:400ms;
    -moz-transition:400ms;
    -o-transition:400ms;
    transition:400ms;
    color:#838383;
    font-weight:700;
    outline:0;
    text-decoration:none
    }

.section-nav a.active,.section-nav a:hover{
    color:#FF8C00;
    text-decoration:none
    }

.nav-trigger{
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
    background:yellow;
    cursor:pointer;
    display:none;
    float:right;
    height:16px;
    margin-top:7px;
    width:16px
    }

.section-header{
    font:800 1.875em "proxima-nova",sans-serif;
    letter-spacing:10px;
    margin:0 0 20%;
    padding-left:10px;
    text-align:center;
    text-transform:uppercase
    }

如果我遗漏了这里要提及的任何内容，请查看浏览器上的inspect元素。

Answer 1

固定位置在移动浏览器上非常poor support。

您应该使用媒体查询在移动浏览器上将其从固定位置更改为绝对位置。

Answer 2

我不明白是什么问题 - 你正在使用“ display：none ;”在两个

media="screen, projection"
.section-nav

然后（当它变得更小时）：

media="screen, projection"
screen.css:2057@media only screen and (max-width: 768px)
.section-nav .nav { display: none; }

我认为你已经搞砸了所有的媒体查询，并且忘记了发生在我身上的事情。你只需要使用Chrome Inspector来解决这些问题; - ）

http://someimage.com/nFKmzAA

Answer 3

screen.css，第93行

.section伪-NAV { 显示：无;}

display none导致此问题。

导航栏/菜单在较小的屏幕上消失 - CSS问题

3 个答案: