【Snow Monkey】ヘッダーコンテンツ（右上）をスマホ用ヘッダー内に挿入する方法

Snow Monkeyのカスタマイザーには、デザイン＞ヘッダーという項目があり、その中にヘッダーコンテンツ（PCサイズでのみ表示されます）という設定を行うことができます。電話番号・問い合わせなどのボタンを設置するのに便利です。今回は、これをスマホ対応させたいと思います。

同じ設定項目の中に、「モバイルでもヘッダーコンテンツを表示する」という部分にチェックを入れてモバイルでも表示させることができますが、その場合はスマホ用のヘッダーよりも下に表示されてしまうため、今回はこれを回避します。

あくまでスマホ用ヘッダー内の右上部分に表示させることが今回のゴールです。

今回は、PCとスマホで同じ内容を表示したいと思います（さらに、CSSで問い合わせボタンのサイズなどを適宜変更しても良いかと思います）。

実装方法

追加CSSで、

@media (max-width: 63.9375em) {
.u-invisible-md-down {
    display: block!important;
}
.u-invisible-md-down .p-global-nav {
    display: none;
}
}

と入力します。これだけです。

これで、スマホ用ヘッダーの右上に要素を表示することができました。

Snow Monkey本体側でdisplay: none!important;と要素を非表示にしているものを、再度display: block!important;とすることで打ち消しています。ただし、グローバルナビのメニュー自体は不要なので、更にdisplay: none;としています。三重になっているので、あまり美しくはない気がしますが…

応用編

さらに応用して、PCとスマホで要素を出し分けしても良いかもしれませんね。

別のアプローチ方法で、公式フォーラムでもPCとスマホでその要素の出し分け方法についても案内されていました。