私のナビが反応するようにする

Question

画面のサイズが変わったときにナビゲーションを動かしたいと思っています。したがって、画面が600または800pxに最小化されると、ナビゲーションが画面の上部に移動し、ドロップダウンメニューの小さなイメージに置き換えられるようにしたいと考えています。

私は完全な初心者です。これはまた、stackoverflowに関する私の最初の投稿です。だから私はまだコードを書く方法を学んでおり、いくつかのアドバイスを本当に感謝しています。

ありがとうございます！ここ

body{ 
 
\t font-family: 'Lato', sans-serif; 
 
\t background-color: #f6be21; 
 
\t margin-right: 20px; 
 
} 
 

 
/* reset margin on all elements */ 
 

 
* { 
 
\t margin: 0; 
 

 
} 
 

 
.blurb{ 
 
\t font-family: 'Lato', sans-serif; 
 
\t font-size: 20px; 
 
\t text-align: left; 
 
\t width: 45%; 
 
\t color: #ffffff; 
 
\t list-style: none; 
 
\t float: left; 
 
\t margin-left: 60px; 
 
\t margin-top: 60px; 
 
\t position: absolute; 
 
\t padding-bottom: 100px; 
 
} 
 

 

 
.big-number-1{ 
 
\t font-size: 70px; 
 
\t text-align: right; 
 
\t clear: both; 
 
} 
 

 
#main-header { 
 
\t text-align: right; 
 
\t width: 100%; 
 
\t float: right; 
 
\t position: fixed; 
 
\t bottom: 275px; 
 
\t height: 20px; 
 
\t right: 50px; 
 
\t clear: both; 
 
} 
 

 
.nav li + li:before{ 
 
\t content: "/"; 
 
\t padding: 0 9px; 
 
\t text-decoration: none; 
 
} 
 

 
ul.nav > li { 
 
\t display: inline; 
 
\t list-style: none; 
 
\t text-decoration: none; 
 

 
} 
 

 
ul.nav{ 
 
\t list-style: none; 
 
\t display: inline; 
 
} 
 

 
h1.title{ 
 
\t font-size: 53.34px; 
 
\t color: #000000; 
 
} 
 

 
a.h1{ 
 
\t text-decoration: none; 
 
} 
 

 
a{ 
 
\t text-decoration: none; 
 
\t color: #000000; 
 
} 
 

 
a:visited{ 
 
\t color: #000000; 
 
}

<header id="main-header"> 
 
     <h1 class="title"><a href="index.php">Chris Ioannou</a></h1> 
 

 
     <ul class="nav"> 
 

 
      <li> 
 
       <a>.01 about</a> 
 
      </li> 
 
      
 
      <li> 
 
       <a href="read.html">.02 read</a> 
 
      </li> 
 
     </ul> 
 
     
 
     <div class="big-number-1"> 
 
\t \t \t <h3>.01<h3> 
 
\t \t \t \t 
 
    </header>

Answer 1

私が削除したクラス.blurbがありましたが、あなたのhtml tagsでそれを見つけることができませんでした。 Second、あなたの仕事responsiveを作るか、私は以下のように特定のwidth後の変更background-colorとtopに位置コンテンツにあなたのコードで、ここで使用していたとしてmedia query to style at different break pointsを使用することができ、それを通してframeworkがある

@media screen and (max-width: 640px){ 
body{ 
    background:red; 
} 
#main-header{ 
    top:0; 
    } 
} 

body{ 
 
\t font-family: 'Lato', sans-serif; 
 
\t background-color: #f6be21; 
 
} 
 

 
/* reset margin on all elements */ 
 

 
* { 
 
\t margin: 0; 
 

 
} 
 

 

 
.big-number-1{ 
 
\t font-size: 70px; 
 
\t text-align: right; 
 
} 
 

 
#main-header { 
 
\t text-align: right; 
 
\t width: 100%; 
 
\t float: right; 
 
\t position: fixed; 
 
\t bottom: 275px; 
 
\t height: 20px; 
 
\t right: 50px; 
 
\t clear: both; 
 
} 
 

 
.nav li + li:before{ 
 
\t content: "/"; 
 
\t padding: 0 9px; 
 
\t text-decoration: none; 
 
} 
 

 
ul.nav > li { 
 
\t display: inline; 
 
\t list-style: none; 
 
\t text-decoration: none; 
 
} 
 

 
ul.nav{ 
 
\t list-style: none; 
 
\t display: inline; 
 
} 
 

 
h1.title{ 
 
\t font-size: 53.34px; 
 
\t color: #000000; 
 
} 
 

 
a.h1{ 
 
\t text-decoration: none; 
 
} 
 

 
a{ 
 
\t text-decoration: none; 
 
\t color: #000000; 
 
} 
 

 
a:visited{ 
 
\t color: #000000; 
 
} 
 

 
@media screen and (max-width: 640px){ 
 
    body{ 
 
    background:red; 
 
} 
 
#main-header{ 
 
    top:0; 
 
    } 
 
}

<header id="main-header"> 
 
     <h1 class="title"><a href="index.php">Chris Ioannou</a></h1> 
 

 
     <ul class="nav"> 
 

 
      <li> 
 
       <a>.01 about</a> 
 
      </li> 
 
      
 
      <li> 
 
       <a href="read.html">.02 read</a> 
 
      </li> 
 
     </ul> 
 
     
 
     <div class="big-number-1"> 
 
\t \t \t <h3>.01<h3> 
 
\t \t \t \t 
 
    </header>

Answer 2

例です。これは、より小さなデバイスの画面の上部にヘッダを移動します。開発者ツールバーのgoogle chromeでこれを確認できます。

@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 480px) { 
    #main-header { 
    top: 0px !important; 
    } 
} 

Answer 3

は、あなたがそれを達成することができます方法はたくさんありますが、私は強くあなたがHTML、CSSやJS フレームワークの素晴らしい世界に飛び込むことをお勧めします。 ブートストラップフレームワーク（http://getbootstrap.com/）で始めることをお勧めします。それは使いやすく、便利なコンポーネントが付属しています。例えば

、あなたはさまざまな画面サイズにしたいメニューのことを行うことが可能なナビゲーションバーコンポーネント、：

http://getbootstrap.com/components/#navbar

はそれが役に立てば幸い！