こんにちは！
ハーマイお兄です。
はてなブログのテーマは「zeno-teal』を使わせて頂いているのですが、
グローバルナビゲーションバー（メニューバー）を導入後、タカラガイ・ビーチコーミング・貝殻・問合せなど複数のカテゴリーが増えてきました。
そこでスマートフォンのグローバルナビゲーションバーをトグルバーにしようとしたのですが、どうも［zeno-teal］のグローバルナビゲーryだとうまく機能出来ず…
CSSでZeno-menuを全消しして新しいメニューバーを表示させても良いのですが、それだと行数が増えすぎて表示速度に関わりそうで嫌だなあと。
そこで、作者様（orefolder様）が紹介されている「zeno-teal」の多段形式を導入することにしました。
しかし、スマートフォンの実機確認ではちゃんと2段になっているのにＰＣグローバルナビゲーションバーでは全く変化せず。。。
それどころか縮めれば縮めるほど文字が狭まって潰れてしまう始末。
この原因を追究してみました。
CSS内部を確認。
カスタマイズで、グローバルナビゲーションバーを多段形式にするのは、作者様がこちらで方法を表示頂いております。
このコードを入れても、ＰＣ側だとメニューバーが潰れてしまう…。
メニューバーの縦幅の変更（height）を施していたことが原因かなと思ったのですが、そういうわけでもない。
もう仕方ないので、一機能ずつ消してデバッグしました。
そして、やっと該当機能を見つけました。
/*スマホ*/
@media (max-width: 480px){
#blog-title-inner {
background-size: contain;
}
#blog-title-inner,#title a{
height:100px!important;
}
これです。このおまじないが原因です。（すみません、ソースを見失ってしまいました。）
このコードを全て消せば多段形式が使用できるようになります。
このコードは背景画像の最大サイズを固定し、ページを小さくしても画像が見切れないよう保持できるようにしています。
一応中身を解説をすると、
・「Background-size」はCSS上の背景画像の幅と高さを拡大・縮小が出来るCSSプロパティです。
・「Contain」は縦横比率を保持させ、背景領域に収まる最大サイズで拡大縮小を行う値を持っています。
メニューバーが何故背景画像として認識されてしまっているのかはよく分からないのですが、これによってメニューバーまで縦横比率を保持されてしまい、多段形式を拒んで文字がぶっ潰れていたわけですね。
「height：100px!important」は、
高さ100pxを優先して保持しますよーって意味のようです。
heightを保持した状態で、背景画像の幅も高さも縮小しても縦横比率を維持しているので、ニコイチでセットなのだと思います。
そのためこのうちどれか一行を消しても変化はなく、この1機能全て消すしか手段はありませんでした。
多段方式をCSSへ貼り付け
あとは、先ほどの作者様のブログで記載のある、多段方式にするためのコードを貼ります。
私のブログの場合はテーマに「Beachcombing」というやたらと長い名前があるために文字が潰れてしまったので、コードで区切るタイミングを増やしています。
/*多段方式*/
.zeno-menu{
-webkit-flex-wrap: wrap;
flex-wrap:wrap;
}
.zeno-menu li{
width:16.5%;
}@media screen and (max-width: 1200px){
.zeno-menu li{
width: 20%;
}
}
@media screen and (max-width: 780px){
.zeno-menu li{
width: 33%;
}
}
@media screen and (max-width: 480px){
.zeno-menu li{
width: 50%;
}
}
４パターンでナビゲーションバーが多段に分岐するので、文字が潰れることはありません！
良かったあー。
ナビゲーションバーからトグルバーに変更する方法は？
作者様に失礼ながらも確認させて頂いたところ、結論としては「zeno-teal」のナビゲーションバーを全て打消し、新しいナビゲーションバーで作った方が良いそうです。
orefolder(id:c-miya)さん
それはもうまとめて取り替えてしまったほうが良いです。
そういうもののサンプルなど探せば出てくると思うので、それをうまくブログの色に合わせたほうが良いと思います。
参考になれば幸いです。
まとめ
Zeno-tealのメニューバーは「zeno-menu」というクラスで作られているようで、CSS初心者にはメニューバーを改良する際にかなり戸惑うかもしれません。
「Zeno-tealは中級者向け」という文言をどこかのサイトで見ましたが、あながち間違いではないかもしれませんね。
最後まで見ていただき有難うございました。
