wordpressで作成したサイトをスマホviewにしたときにメニューが表示されないのでされるようにしたい

Question

実現したいこと

• wordpressで作成したサイトをスマホviewにしたときにメニューが表示されないのでされるようにする

前提

html/css初心者です。
wordpressで↓のサイトを作成しています。
https://vintage-select.net/

PC表示だと問題なく上部メニュー名を表示することができているのですが、スマホだと上部メニュー(添付画像赤枠部分)が表示されない状況です。

横スクロールナビゲーションにするためにこちらのサイトを参考に以下のcssを入れていることで問題が発生しているとは思うのですが、解決方法がわからない状況です。

/*スマホメニューを横スクロール*/
#header-container .navi-in > ul li {
  height: auto;
  font-weight: 600;
  line-height:1.3;
}
#header-container #navi a{
  padding:0.8em 1em;
	color: #000000;
}
#header-container #navi a:hover{
   color:#89c997; /* マウスホバー時の文字色 */
}

#header-container .navi-in > ul > .menu-item-has-children > a::after {
  top: 0.8em;
  font-size: 1.2em;
  font-weight: 600;
}
#header-container .sub-menu .caption-wrap{
  padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
  height:auto;
}
@media screen and (max-width: 1030px){
 #header-container .menu-mobile{
   display:none;
 }
 .navi-in > .menu-mobile{
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   overflow-x: scroll;
   white-space: nowrap;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   justify-content: flex-start;
   flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
 }
 #header-container #navi a{
   font-size:1em;
   padding: 1em 1em;
 }
 #header-container .navi-in > ul > .menu-item-has-children > a::after{
   display:none;
 }
 #navi .navi-in > .menu-mobile li {
   height: auto;
   line-height: 0;
 }
 .mblt-header-mobile-buttons {
   margin-top: 53px;
 }
}

試したこと

chromeの検証を用いて、マウスを対象部分に当てて、一つ一つcssを見て、色を変えて見たりしたのですが、メニュー名が表示されませんでした。

補足情報（FW/ツールのバージョンなど）

wordpress テーマはcocoonを使用しております。

Answer 1

.item-label の高さが 0 になっているので見えない状態です。
明示的に高さを指定した上で、 align-items: center; で文字が中央に表示されるよう調整してみてください。

.navi .item-label {
-   display: -webkit-box;
+   display: flex;
+   height: 1em;
+   align-items: center;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

Comments

[Vintage-Select]

ありがとうございます！
可能であれば今後のために、どのようして今回の事象を解決したか教えていただけないでしょうか？

[shinoharat]

Chrome で F12 を押下して開発者ツールを起動
　↓
Ctrl + Shift + M でスマホ表示に切り替え
　↓
調べたい要素を右クリックして [検証] を選択。
　↓
border: 1px solid red;　を追加して見え方を確認

この時点で div 要素がぺちゃんこに潰れていたので、 height が原因だろうとアタリを付けました。