VWSとは フォーラム デザインスキン [ 解決済 ] Paleのモバイル固定ナビとスライドメニューの高さ

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

  • このトピックには5件の返信、3人の参加者があり、最後に森内愛民により1週、 4日前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #42976

    森内愛民
    参加者

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

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

    #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;
    }

    こんな感じの意味合いであっていますか?
    違っていましたらまた教えてください。

    #42998

    石川@Vektor,Inc.
    キーマスター
    #43011

    森内愛民
    参加者

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

    #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;
    }
    #43063

    森内愛民
    参加者

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

6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。