Lightning グローバルナビのメニューの文字の位置
-
こんにちは、お世話になっております。
グローバルナビのフォントについて、モバイルのときにも表示する設定にしています。
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件中)
3件の返信を表示中 - 1 - 3件目 (全3件中)
- トピック「Lightning グローバルナビのメニューの文字の位置」には新たに返信することはできません。