レスポンシブ対応で横スクロールした際、ヘッダーのナビゲーションが表示されない

レスポンシブ対応をしています。
ヘッダーのロゴとナビゲーションを横並びにしているのですが、横スクロールした際にナビゲーションが消えてしまい、指定した600ピクセルになると出てくるという状況です。
全ての画面においてロゴとナビゲーションを表示させたいのですが、
どうしたら良いでしょうか。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Logo</title> <meta name="viewport" content="width=device-width,initial-scale=1">

<!----css---->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="style.css">

</head> <body> <header class="page-header"> <h1>LOGO</h1> <nav> <ul class="main-nav"> <li><a href="home.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header>

<div class="top-wrapper">

</div>

<h2>Feature</h2>

<div class="about wrapper">
    <article>

        <h3>What is “Coding Basics”?</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
            ex ea. commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
            eu.
        </p>

        <a class="button" href="#">Read More</a>

    </article>

    <aside>
        <img src="images/sample@2x.png" alt="パソコンを見る女性">
    </aside>


</div>




<footer>
    <div class="logo"><small>LOGO</small></div>
    <p>&copy; 2020 LOGO All rights reserved.</p>
</footer>

</body> </html>

@charset "UTF-8";

/* 共通部分
--------------------*/
html {
font-size: 100%;

}

body {
font-family: Arial;
line-height: 1.7;
min-width: 100%;
color: #432;

}

a {
text-decoration: none;
}

img {
width: 100%;
}

/* ボタン */
.button {
color: #fff;
background: #EFA358 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
border-radius: 10px;
padding: 15px 56px;
opacity: 1;
}

/* header
----------------------*/
header {
background: #EFA358;
height: 80px;
width: 100%;
min-width: 1300px;
margin: auto;
}

h1 {
color: #fff;
font-size: 28px;
margin-left: 0px;
}

.main-nav {
display: flex;
font-size: 20px;
list-style: none;
}

.main-nav li {
margin-left: 16px;
}

.main-nav a {
color: #fff;
}

.page-header {
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
}

.wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 0 4%;
}

/* home
----------------------/
/ 大きな画像　*/
.top-wrapper {
background: url("images/fv@2x.png");
min-height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 1;
}

h2 {
text-align: center;
font-size: 32px;
margin-bottom: 30px;
padding: 20px;
}

/* about
---------------------*/

.about {
display: flex;
justify-content: space-around;
margin-bottom: 50px;
}

/*記事部分　*/
article {
text-align: left;
width: 45%;
order: 2;
}

/*小さな画像　*/
aside {
width: 480px;
height: 329px;
order: 1;

}

h3 {
font-size: 32px;

}

article p {
font-size: 16px;
letter-spacing: 0px;
text-align: left;
letter-spacing: 0px;
line-height: 24px;
margin-bottom: 40px;
width: 394px;
height: 161px;
}

/フッター
----------------------/

footer {
background: #EFA358;
text-align: center;
margin-top: 100px;
padding: 26px 0;
height: 100px;
}

.logo {
color: #fff;
font-size: 24px;
}

footer p {
color: #fff;
font-size: 12px;
}

/* モバイル版
-------------------*/
@media (max-width:600px) {

/* header */

.page-header {
    display: block;  
    flex-direction: column;
    align-items: center;
}

h1 {
    padding: 0 20px;
}
.main-nav {
    font-size: 1rem;
    margin-top: 10px;
    
}

.main-nav li {
    margin: 0 20px;
    text-align: left;
}


/* about */
.about {
flex-direction: column;
  }

 .article,
 .aside {
width: 100%;

  }

  h3 {
font-size: 2rem;
  }

 .article {
text-align: center;

 }

}

行動規範の内容に同意します

回答1件

ベストアンサー

css
1header {
2background: #EFA358;
3height: 80px;
4width: 100%;
5min-width: 1300px;
6margin: auto;
7}

上記で、min-width: 1300px; と最小幅を1300pxと設定しているため、画面幅が1300px以下になったら画面からはみ出します。はみ出した部分はスクロールしないと表示されません。
どのような意図でこのような設定にしたのかわかりかねますが、これを削除すればはみ出さなくなります。

.wrapper に max-width: 1100px; と設定してますので、それにあわせるなら、header も同じ設定にするのが普通かなと思います。

投稿2022/09/18 02:20

hatena19

総合スコア33699

web83740439

2022/09/18 03:48

ありがとうございました。解決できました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

レスポンシブ対応で横スクロールした際、ヘッダーのナビゲーションが表示されない

関連した質問