サポート » テーマ » Lightning グローバルナビのメニューの文字の位置

  • 解決済 syntaro

    (@syntarou)


    こんにちは、お世話になっております。

    グローバルナビのフォントについて、モバイルのときにも表示する設定にしています。

    PC画面の幅のときだけ、文字の高さの微調整ができません。
    モバイルでは、微調整できます。
    URLをご参照ください。

    ソースのどのあたりが参考になるか、ご存じの方はいらっしゃいますか。

    
    /* モバイルメニューを非表示にする */
    .vk-mobile-nav-menu-btn {
    	display: none;
    } 
    
    /* ヘッダーナビをモバイルであってもコンテンツ幅いっぱいに広げる */
    body:not(.header_scrolled) .global-nav--layout--float-right {
      display: block;
      width: 100%; 
    }
    
     /* サイトヘッダー文字列の幅を文字にあわせた固定値を指定する */
      .site-header-logo {
    	min-height: 30px;
    	max-width: 220px; /* 文字がかわると数値もかわる */
    	font-size: 0; /* 余計な空白を消去する */
    	/* 文字を縦横中央のよせる(3行) */
    	display: flex;
    	align-items: center;
        justify-content: center;
      }
    
      .site-header-logo span {
        font-size: 20px;   /* 空白除去のため0に設定したフォントをなおす */
      }
    
      .global-nav-list {
        font-size: 0;
    
    	width: 100%;
    	height: 100%;
    	
    	flex-wrap: wrap;
        display: flex;
    	margin: 10px;
    	padding: 10px;
    	flex-direction: row;
    
    	column-gap: 10px;
        row-gap: 10px;
    	border: solid 10px lihgtblue;
      }
    
      .global-nav-list > li {
    	font-size: 16px; /* 空白を消すために0にしたサイズを今度はセットする */
    	flex-grow: 1; /* 要素が足りない行の幅を広げる*/
        flex-basis: auto;
    	min-height: 33px;
    	max-height: 33px;
    	margin: 0;
    	padding: 0;
    	min-width: 120px; /* 最小幅(空間) */
    	border-radius: 50% 20% / 10% 40%;
        outline: 2px solid lightyellow;
    	background-color: yellow;
    	display: flex;
    	align-items: center;
        justify-content: center;
      }
    

    ヘルプの必要なページ: [リンクを見るにはログイン]

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック投稿者 syntaro

    (@syntarou)

    すいません。補足させていただきます。

    Lightning無償版を使用しています。

    複数のサイトを元にしました。まだまだ素人です。
    PCでこのURLをひらいて、横幅を変化させると、グローバルナビの構成も
    あわせてフィットするために、移動すると思います。

    そのさい、一番幅がひろいときに、文字の縦の位置を修正できずに困っています。

    よろしくお願いします。

    とりあえずグローバルメニューの項目に <br /><span></span> とか入っていて、これがどういう理由で(メニュー項目に何か直接手入力したのかご自身で何かコードを改変した結果だと思いますので外部からはわかりません)入っているのかわかりませんが、これを削除するところからはじめた方がよいのではないかと思います。

    トピック投稿者 syntaro

    (@syntarou)

    大変ありがたいヒントでした。

    function.phpの以下のコードをコメントアウトしたところ、だいたいうまくいきました。
    ただ、必要以上に小さい高さだとずれてしまいますが、これは、仕方ないですね、、

    いらなくなったコードはどんどん消したほうがいいですね。

    /*
    add_filter(‘walker_nav_menu_start_el’, ‘description_in_nav_menu’, 10, 4);
    function description_in_nav_menu($item_output, $item){
    return preg_replace(‘/(<a.*?>[^<]*?)</’, ‘$1’ . “<br /><span>{$item->description}</span><“, $item_output);
    }*/

    お騒がせしました。またよろしくお願いします。

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