ヘッダーメニューのレスポンシブ時における伸縮の実装

Question

質問概要

今、ヘッダーのメニューを実装しているのですが、
画面幅を小さくしていく際に上手くヘッダーも縮んでいきません。
画面幅が小さくなっていった時に、グレーのkv部分と同じように縮んで行ってほしいのですが、上手く実装できません。（下のキャプチャ）
widthに上手く%指定ができれば良いのは何となく分かりますが、どうにも進展しません。

こういったヘッダーメニューのレスポンシブ時の具体的な実装の方法を教えていただければと思います。

(例えば、ここにwidth何%を指定して、ここにdisplayのflexを指定してやるのが一般的とかメディアクエリにはこのwidthをしてするとか)

試したこと

・全体を覆うheader-topにwidth:100%;指定（あまり意味がないことも理解していますが）
・Googleで「ヘッダー　メニュー　レスポンシブ」などの類似のキーワードで検索しましたが、目ぼしい結果が帰ってきませんでした。

現在の実装状況のキャプチャ

![

現段階のコード

<div class="header-top">
                <div class="header-title">

                </div>
                <div class="header-list">
                    <ul>
                        <li><a href="#con1">CONTENTS1</a></li>
                        <li><a href="#con2">CONTENTS2</a></li>
                        <li><a href="#con3">CONTENTS3</a></li>
                        <li><a href="#">CONTENTS4</a></li>

                        <!-- Twitter ロゴ-->
                        <!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In  -->
                        <li><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="14px"
                        viewBox="0 0 512 415.84" style="enable-background:new 0 0 512 415.84;" xml:space="preserve">
                        <defs>
                        </defs>
                        <path d="M459.37,103.63c0.33,4.55,0.33,9.1,0.33,13.65c0,138.72-105.58,298.56-298.56,298.56c-59.45,0-114.68-17.22-161.14-47.11
                        c8.45,0.97,16.57,1.3,25.34,1.3c49.06,0,94.21-16.57,130.27-44.83c-46.13-0.98-84.79-31.19-98.11-72.77c6.5,0.97,13,1.62,19.82,1.62
                        c9.42,0,18.84-1.3,27.61-3.57c-48.08-9.75-84.14-51.98-84.14-102.98v-1.3c13.97,7.8,30.21,12.67,47.43,13.32
                        c-28.26-18.84-46.78-51-46.78-87.39c0-19.49,5.2-37.36,14.29-52.95c51.65,63.68,129.3,105.26,216.37,109.81
                        c-1.62-7.8-2.6-15.92-2.6-24.04C249.5,47.11,296.28,0,354.43,0c30.21,0,57.5,12.67,76.67,33.14c23.71-4.55,46.46-13.32,66.6-25.34
                        c-7.8,24.37-24.37,44.83-46.13,57.83c21.12-2.27,41.58-8.12,60.43-16.24C497.71,70.17,479.84,88.69,459.37,103.63L459.37,103.63z"/>
                        </svg></li>

                        <!-- Facebook ロゴ-->
                        <!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In  -->
                        <li><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                        width="7px" height="17px" viewBox="0 0 274.22 512" style="enable-background:new 0 0 274.22 512;" xml:space="preserve">
                        <defs>
                        </defs>
                        <path d="M256.25,288l14.22-92.66h-88.91v-60.13c0-25.35,12.42-50.06,52.24-50.06h40.42V6.26c0,0-36.68-6.26-71.75-6.26
                        C129.25,0,81.39,44.38,81.39,124.72v70.62H0V288h81.39v224h100.17V288H256.25z"/>
                        </svg></li>
                    </ul>
                </div>

.header-top{
    display: flex;
    justify-content: space-between; 
    height:115px;
    width: $width;
    margin: 0 auto;
}

.header-title{
    width:216px;
    height:100px;
    background-color:red; 
    margin-right:192px;
    display:flex;
    align-items: center;
}

.header-list{
    display: flex;
    align-items: center;
    a{
        text-decoration: none;
        color:$color-font;
    }
    ul{
        height:15px;
        display: flex;
        li{
        padding-left:52px;
        font-family:$font-en;
        font-weight: $weight;
        font-size:15px;
        line-height:1;
        &:first-child{
            padding-left: 0px;
        }
        &:nth-child(6){
            padding-left:18px;
            position: relative;
            top:-2px;
        }
        }
    }
}

@media screen and (max-width:1080px){
    .header-top{
        width:100%;
    }

    .header-title{
        margin-left:20px;
    }

@media screen and (max-width:767px){
    /* ヘッダー部分 */
    .header-list{
        display: none;
    }

    .header-title{
        margin-right:0;
    }

よろしくお願いいたします。

Answer 1

横幅について、全体の画面幅が1000px以下程度の場合を想定すると、
.header-titleのmargin-right: 192px;のままだと1/5くらい消費
.header-list ul liのpadding-left: 52pxのままだと1/5くらい消費
合計2/5ほど、余白で使ってしまっている状態になっています。

そのため以下のブレークポイントでその余白を小さくすることを、
レスポンシブ対応時には行います。

@media screen and (max-width: 1080px) {
  /* 追加 */
  .header-title {
    margin-right: 40px; /* 192pxだと、全体の1/5を使ってしまうので小さく */
  }
  .header-list ul li {
    padding-left: 20px; /* 52pxのままだと、全体の1/5を使ってしまうので小さく */
  }
}

@media screen and (max-width:767px)以下のときは、
ドロワーメニューを実装するか、ロゴとナビゲーションを左右に配置するのではなく上下に配置する..
などを行う必要があると考えます。

Comments

[yuto_urushima]

回答いただきありがとうございました！
おかげさまでデザインが崩れることなく、レスポンシブ化できるようになりました！！

[new1ro]

問題解決できたようでよかったです。

レスポンシブなコーディングにて崩れが生じた場合、高度なCSS上の知識がなくても、横幅や余白の足し算、引き算で崩れの原因にたどり着く場合があるので
あまり怖がらず、いったん計算してみてください。