私のヘッダーはこれを行うウィンドウのサイズを減らすことによって？

-5

ここでは画像の下に私のヘッダーはこれを行うウィンドウのサイズを減らすことによって？

通常大きなウィンドウサイズ

をウィンドウサイズナビゲーションバーシフトを減少した後のコードです。私はHTMlとCSSを付けました。

基準ビデオリンク - >https://www.youtube.com/watch?v=TTbYFzAz-Lg

私が応答ナビゲーションバーを作成しようとしています..しかし、私はナビゲーションバーウィンドウサイズdeceasesの振る舞いが届きません。あなたは、画面のサイズを小さくするとき

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <title> 
      Responsive Navigation Bar 
     </title> 
     <link href="style.css" rel="stylesheet" type="text/css"> 
     <meta name="viewport" content="width=device-width initial-scale=1"> 
    </head> 
    <body> 
     <div id="header"> 
      <div id="logo"> 
       <img src="Redbull-logo.png"> 
      </div> 
      <ul id="navbar"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Service</a></li> 
       <li><a href="#">Product</a></li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">About</a></li> 
      </ul> 
     </div> 
    </body> 
</html>

CSS

*{ 
    margin: 0px; 
    padding: 0px; 
} 

body{ 
    background: skyblue; 
} 

#header{ 
    width: 100%; 
    height: 80px; 
    background: #333; 
    box-shadow: 0px 3px 4px gray; 
} 

#navbar{ 
    width: 1000px; 
    height: 80px; 
    float: right; 
} 

#navbar > li{ 
    width: 198px; 
    list-style: none; 
    float: left; 
    border-right: 1px solid gray; 
    border-left: 1px solid gray; 
} 

li > a{ 
    display: block; 
    color: white; 
    line-height: 80px; 
    text-align: center; 
    font-family: cursive; 
    font-size: 20px; 
    text-decoration: none; 
} 

li > a:hover, 
li > a:focus{ 
    background-color: skyblue; 
    color: #333; 
} 

#logo{ 
    width: 200px; 
    float: left; 
    height: 80px; 
    padding-left: 40px; 
}

出典

2017-12-05 Karsh Soni

は、なぜあなたはいくつかのコードを投稿しないでどのように働くかの例？ – jhpratt

より良い質問をするためのリンクがいくつかあります：https://stackoverflow.com/help/how-to-ask、[MCVE] –

-1

は、基本的に何が起こっていることはそこにすべてのあなたのリンクのナビゲーションバーに十分なスペースがなく、またあなたのさイメージを2行にプッシュするように、メディアのクエリを調べるので、画像のサイズやナビゲーションリンクのサイズなど、ある程度の幅で変化します。

これは

@media (max-width: 1080px){ 
    navbar-links{ 
    font-size: 0.8em; 
    padding: 0px 5px; 
    } 

    navbar-image{ 
    width: 500px; 
    }

出典

2017-12-05 04:45:07 A61NN5

コードを提供していないトピックに関する質問には答えないでください。問題は（そして広すぎる）。そうすることは、SOの有用性を薄める。 – Rob

私は私の答えを得たと思う。サイズが小さくなるとリンクが2行目に押し込まれ、リンクが消えてしまうのですが、画像が同じままになってしまうのはなぜですか？ –

@ Karsh Soni私はあなたの画像とnavリンクの一定の幅でメディアクエリを設定しなければならないと言ったように、navbarが2つに分割してメディアクエリを設定し、画像を小さくするとき。私は基本的なCSSクラスを取ることを検討しますが、これは確実にカバーされるからです。 – A61NN5

私のヘッダーはこれを行うウィンドウのサイズを減らすことによって？

答えて

関連する問題