0

我正在开发一个网站，我面临一个小问题。网站的顶部导航栏可以在特定的屏幕分辨率下正常工作。但是，如果我调整浏览器窗口（尺寸更小），导航栏就会消失。如果我在 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
    }

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

4

3 回答 3

1

固定位置在移动浏览器上的支持很差。

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

于 2013-05-16T10:46:19.803 回答
1

我不明白有什么问题 - 你正在使用“显示：无；” 双方

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

于 2013-05-16T11:26:49.380 回答
0

在 screen.css 中，第 93 行

.section-nav{ 显示：无；}

display none 会导致这个问题。

于 2013-05-16T11:25:15.217 回答