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

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
    }

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

Answer 1

我不明白这是什么问题 - 您使用的是“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