0

私はウェブサイトを開発している途中で、小さな問題に直面しています。Web サイトのトップ ナビゲーション バーは、特定の画面解像度まで正常に動作します。ただし、ブラウザー ウィンドウを調整すると (サイズが小さくなります)、ナビゲーション バーが表示されなくなります。Ipad で Web サイトを表示しても、同じ問題が発生します。ナビゲーション メニューの 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

何が問題なのかわかりません。「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

于 2013-05-16T11:26:49.380 に答える
1

Position fixed は、モバイル ブラウザーでのサポートが非常に貧弱です。

メディア クエリを使用して、モバイル ブラウザーで固定位置から絶対位置に変更する必要があります。

于 2013-05-16T10:46:19.803 に答える