[ 解決済 ] Paleのモバイル固定ナビとスライドメニューの高さ

このトピックには5件の返信、3人の参加者があり、最後に森内愛民により4年前に更新されました。

6件の投稿を表示中 - 1 - 6件目 (全6件中)

投稿者

投稿
2020年10月9日 9:42 AM #42976

森内愛民
閲覧者

Lightning Pro + Paleにてサイト構築しています。
Paleのモバイル固定ナビとスライド（グローバル）メニューの高さですが、
スライドメニューを出した際にモバイル固定ナビの上端ピッタリに出てくるようになっています。

モバイル固定ナビのボタンを大きくしたい（＋20pxくらい）のですが、
モバイル固定ナビを大きく変えて、更にスライドメニューを短く（-20px）し、上端ピッタリにスライドメニューが揃うようにしたいと考えています。カスタマイズの方法ご教授お願いします。

2020年10月9日 10:25 AM #42979
うなこ
モデレーター
固定ナビの高さを＋20pxしたcssを記述しました。
追加CSSや子テーマのstyle.cssなどに以下を追加してみてください。
```
@media screen and (max-width: 782px){
.admin-bar .vk-mobile-nav{
height: calc(100% - 82px - 46px);
}
}
.admin-bar .vk-mobile-nav{
height: calc(100% - 82px - 46px);
}

.mobile-fix-nav .mobile-fix-nav-menu {
height: 82px;
}
```
こんな感じの意味合いであっていますか？
違っていましたらまた教えてください。
2020年10月9日 12:52 PM #42998

石川＠Vektor,Inc.
キーマスター
制作実績

CSSのカスタマイズについては下記も参照ください

全てのWordPressテーマで使える！デザインをピンポイントで変更する方法〜親テーマのCSSは書き換えないで〜

2020年10月9日 1:52 PM #43011

森内愛民
閲覧者

ありがとうございます。
教えていただいた記述でモバイル固定ナビの高さを変更することができました！
モバイル固定ナビはこれで大丈夫なのですが、今の状態だと、
左上のメニューボタンを押してスライドメニューが表示された際に
サイズ変更前のモバイル固定ナビの上端の位置までメニューが表示されてモバイル固定ナビの上部が隠れてしまいます。
20px大きくしたモバイル固定ナビの上部が隠れないようにスライドメニューを20px短くする方法もご教授いただければ助かります。
質問内容が分かりにくくて申し訳ありません…

2020年10月9日 3:16 PM #43029
うなこ
モデレーター
以下でいかがでしょうか？
```
@media screen and (max-width: 782px){
.admin-bar .vk-mobile-nav{
height: calc(100% - 82px - 46px);
}
.admin-bar .vk-mobile-nav.vk-mobile-nav-open{
top: 0px;
}
}
.admin-bar .vk-mobile-nav{
height: calc(100% - 82px - 46px);
}

.mobile-fix-nav_enable .vk-mobile-nav-open{
height: calc(100% - 82px);
}

.mobile-fix-nav .mobile-fix-nav-menu{
height: 82px;
}
```
2020年10月10日 9:35 AM #43063

森内愛民
閲覧者

ありがとうございます！
上記のコードで解決できました。
勉強になり助かりました。
投稿者

投稿