サポート » テーマ » ヘッダーナビのレイアウト

  • 解決済 syntaro

    (@syntarou)


    こんにちは、ふたたびよろしくお願いします。

    Lightning無償版で、WordpressとLightningは最新版です。

    ヘッダーナビのレイアウトを変更しています。

    1.アイテムが多い場合2段にする
    2.メニューアイテムの輪郭を丸くする
    3.モバイルの横幅であってもタイトルの下の行として
      同様に表示する(PCでは、タイトルの横)

    大体できてきました。
    問題点がいくつかあります。

    A)タブレットなどの横幅サイズにすると、メニュー項目のさらにサブメニューが隠れる。
     (一番右の新規事業のところ、赤色の領域です)
     この場合であっても、画面が横いっぱいPCサイズの場合や、PCサイズの画面スクロールしたときの
     メニューでは問題ありません。

    B)メニュー項目に、さらにサブメニューがある場合、文字が左よせになってしまう。
     この場合であっても、画面が横いっぱいPCサイズの場合や、PCサイズの画面スクロールしたときの
     メニューでは問題ありません。

    C)サブメニュー項目について、マージン領域を透明色にしたい。
     CSSの指定する場所がわかりませんでした。

    丸投げで申し訳ありませんが、なにとぞお力添えください。
    よろしくお願いします。

    カスタムCSSに以下を書き込むと、新規サーバーでもおなじ動作になります。

    /* ヘッダーナビをモバイルであってもコンテンツ幅いっぱいに広げる */
    .global-nav {
    display: block;
    width: 100%;
    overflow: visible;
    }

    .global-nav-list {
    font-size: 0;

    width: 100%;
    height: 100%;
    flex-wrap: wrap;

    display: flex;
    justify-content: center;
    align-items: center;

    margin: 10px;
    padding: 10px;
    flex-direction: row;

    column-gap: 10px;
    row-gap: 10px;
    border: solid 10px lihgtblue;
    }

    .global-nav li {
    color: white;

    border-radius: 50% 20% / 10% 40%;
    /*outline: 2px solid white; */
    background-color: yellow;

    font-size: 14px; /* 空白を消すために0にしたサイズを今度はセットする */

    flex-grow: 1; /* 要素が足りない行の幅を広げる */
    flex-basis: 1;
    min-width: 150px; /* 最小幅(空間) */
    }

    .global-nav-list ul {
    background-color: black;
    }

    .global-nav-list ul li {
    border-radius: 50% 20% / 10% 40%;
    background-color: red;
    font-size: 14px; /* 空白を消すために0にしたサイズを今度はセットする */
    }

    .global-nav-list .sub-menu {
    z-index: 100;
    overflow: visible !important;
    max-height: 200px;
    }

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

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

    (@syntarou)

    ハック的な手段ですが、おそらく、メニューのプルダウン領域を、抹消してあげることで、Bには対処できました。
    Cについては、できないといわれていますね、CSSでこの領域を指定する手段がないみたいですね。
    Aについて、引き続きよろしくお願いします。

    サブメニューのプルダウンを、領域外でも行いたいという、要望になります。

    z-indexなど試しましたが、できませんでした。

    Bの対処は以下のように行いました。

    /* モバイルのプルダウン領域を消す */
    .global-nav-list a {
    padding-left: 12px !important;
    padding-right: 12px !important;
    }

    @media (max-width: 991.9px) {
    .global-nav-list li .global-nav-name {
    margin: 12px 0 12px 0 !important; /* 上右下左 */
    padding: 0 !important;
    }
    }
    @media (min-width: 992px) {
    .global-nav-list li .global-nav-name {
    margin: 0px !important;
    padding: 0 !important;
    }
    }

    こんにちは

    下記の overflow:hidden で表示がカットされているからではないでしょうか?

    .site-header-container {
      display:block;
      overflow:hidden; ←ここ
    }
    トピック投稿者 syntaro

    (@syntarou)

    ありがとうございます!
    ここで質問してよかったです。

    .site-header-container {
    overflow: visible;
    }

    上記にて対応できました。
    またお願いします。

    • この返信は1ヶ月、 2週前にsyntaroが編集しました。
3件の返信を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。