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

Navigation bar/menu getting disappeared on smaller screen - CSS issue

本文关键字：消失 CSS 问题 屏幕 菜单 导航      更新时间：2023-09-26

我正在开发一个网站，我正面临一个小问题。网站的顶部导航栏在特定的屏幕分辨率下工作良好。然而，如果我调整我的浏览器窗口(较小的大小)，导航栏就会消失。如果我在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元素

我不明白是什么问题-你在两个

上使用"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检查器来找出那些;-)

http://someimage.com/nFKmzAA

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

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

screen . css,第93行

.section-nav {显示:没有;}

相关文章：