nav タイトル レスポンシブ対応

Question

現在、練習材料として下記のホームページを模写しておりますが、スマートフォン用にレスポンシブ対応をさせてたく、横並びになっているナビバーが２列ずつで折り返されるようにならず、PC表示のまま見切れて表示されてしまいます。
試してみたこと
@media(max-width: 812px)以下にて表示させた場合に、横一列に並んでいるnavバーをレスポンシブ対応させるべく、navに対してwithを調整したり、flex-wrapで折り返しなどを試みましたが、特に変化が見られずに悩んでおります。

模写対象のURL：https://haniwaman.com/sample/part3/template_08/index.html

現状

実現したい画面

    <!-- header -->
<div id="wrapper">
    <header>
        <div class="headerbox">
            <div class="headernav">
                <h1>
                <a href="index.html"><img src="img/siteTitle.png" alt="headerlogo"></a>
                </h1>
                    <div class="title">"texttexttexttexttexttexttexttexttexttexttex</div>
                    <div class="headerinfo">
                    <p class="phone">00-0000-0000</p>
                    <p class="time">text 10:00~19:30 <span class="redtag">te xt</span</p>
                    </div>
            </div>

    <!-- ﾍｯﾀﾞｰナビ -->
        <div class="nav">
            <ul>
                <li class="first">
                    <a href="index.html">
                        <span class="titleja">text</span>
                        <span class="titleen">text</span>
                    </a>
                </li>
                <li>
                    <a href="clinic.html">
                    <span class="titleja">text</span>
                    <span class="titleen">text</span>
                    </a>
                </li>
                <li>
                    <a href="service.html">
                    <span class="titleja">text</span>
                    <span class="titleen">text</span>
                    </a>
                </li>
                <li>
                    <a href="staff.html">
                    <span class="titleja">text</span>
                    <span class="titleen">text</span>
                    </a>
                </li>
                <li class="last">
                    <a href="access.html">
                    <span class="titleja">text</span>
                    <span class="titleen">text</span>
                    </a>
                </li>
            </ul>
        </div>
    <!-- ﾍｯﾀﾞｰナビ -->
        </div>
    </header>
    <!-- header -->

</div>
</body>
</html>

/* nav */

.nav {
    width: 920px;
    height: 74px;
    position: absolute;
    bottom: 0;
    left: 0;
    letter-spacing: -1em; /* 文字間を詰める */
    white-space: nowrap; /* 自動で折り返ししない */
    text-align: center;
    border: solid 1px #9aaace;
    border-radius: 10px;
    background: linear-gradient(#9CE3E2, #6CC6C4);
}

.nav li:hover {
    background: linear-gradient( #6CC6C4, #9CE3E2);
}

.nav li.first:hover {
    background: linear-gradient( #6CC6C4, #9CE3E2);
    border-radius: 10px 0 0 10px;
}
.nav li.last:hover {
    background: linear-gradient( #6CC6C4, #9CE3E2);
    border-radius: 0 10px 10px 0;
}

.nav ul {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}

.nav ul a {
    width: 182px;
    height: 39px;
    text-decoration: none;
    display: block;
    padding: 17px 0px 18px;
    text-shadow: 1px 1px 2px #6CC6C4;
    border-radius: 10px;
}

.nav ul li {
    display: inline-block;
    letter-spacing: normal; /* 文字間を元に戻す */
    white-space: normal; /* 自動で折り返し(元に戻す) */
    box-sizing: border-box;
    text-align: center;
    flex-grow: 1;
    border-left: 1px solid #d6d6d6;
}

.nav ul li.first {
    border-left: none;
}

.titleja {
    font-size: 16px;
    font-weight: bold;
    display: block;
    color: #fff;
}

.titleen {
    font-size: 10px;
    font-weight: bold;
    display: block;
    color: #fff;
}

/* nav */

@media(max-width: 812px) {
    ul {
        float: none;
    }

    /* newinfo */
    #wrapper {
        width: 100%;
        border-top: 8px solid #6CC6C4;
        height: auto;
        float: none;
    }

    .headerbox {
        width: 920px;
        height: 200px;
        margin: 0 auto;
        position: relative;
    }

    .title {
        position: static;
        font-size: 1rem;
        color: #515151;
        font-weight: 400;
        margin: 5px 0 0 0;
        text-align: center;
    }

    .headerinfo {
        width: 224px;
        height: 66px;
        position: static;
        margin: -20px auto;
    }

    .phone {
        position: relative;
        top: 5px;
        font-size: 26px;
        color: #414141;
        background-image: url(img/bgTel.png);
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 30px;
    }

    .time {
        position: relative;
        width: 222px;
        height: 18px;
        border: 1px solid #d6d6d6;
        text-align: center;
        font-size: 1rem;
        color: #515151;
        line-height: 18px;
        padding: 5px 0;
    }

    .headernav h1 {
        position: static;
        margin: 0 auto;
    }
/* newinfo */

/* nav */
.nav {
    position: static;
    width: 100%;
    background: none;
    border-radius: 0;
    border: none;
    margin: 12px 0;
    height: auto;
    flex-wrap: wrap;
}

/* nav */

}

Comments

[marlboro_tata]

アップされたHTMLだけだと、部分的すぎて詳細の検討ができません。
さすがに、コンテンツ部分は不要なので削除しても良いかと思いますが、<html>〜</html>まで、すべて掲載すると、回答が得られやすいと思います。
あと、CSSについても、「うまくいかなかった」部分も含めて掲載すると良いと思います。

[Lhankor_Mhy]

メニューの枠線がフレックスボックスの外で書かれていますから、ご希望の表示をするには根本的に見直さないといけないと思います。
いっそ、スマートフォン用の要素を別に作った方が楽かもしれません。

[CodOsk]

ご指摘いただきまして、誠にありがとう御座います。
文字制限の関係もあり、掲載できる部分にて修正を致しました。
一点、コメントの中で理解が出来なかった部分があります。
「メニューの枠線がフレックスボックスの外で書かれていますから、」とのことですが、これはどういった意味になりますでしょうか。ご教示願います。

[Lhankor_Mhy]

すでにご回答がついているので、そちらをご参照いただいた方がいいと思いますが、取り急ぎご返信します。

.navにボーダーがついているので、その子要素であるulをフレックスコンテナにしても上手くいかないだろう、ということです。
本来であれば、フレックスアイテムにボーダーをつけるのがよい、というのはご理解いただけますよね？

[CodOsk]

迅速にご回答いただきまして、有り難う御座います。
返信してただきました内容につきましては理解できました。
CSSを一度見直し、改めて、スマートフォン用の画面にて別途作成をします。

Answer 1

取りあえず下記の点を修正すれば折り返すようにはなります。

.nav {
    max-width: 920px; /*修正*/
/*    height: 74px; 削除*/

略

}

.nav ul {
    display: flex;
    flex-wrap: wrap; /*追加*/
    justify-content: space-between;

略

ナビの幅は最大サイズのみ指定して、高さは指定せずに中身の高さに合わせるようにする。
flex-wrap: wrap; で折り返すように設定。

ただし、画像のようにするには、メディアクエリでCSSをスマートフォンサイズ用とPCサイズ用で切り分けるようにしないと無理です。

Comments

[CodOsk]

ご回答していただきまして有難う御座います。
CSSを一度見直し、改めてメディアクエリで、スマートフォン用の画面にて別途作成をします。