サポート » テーマ » Twenty Sixteenのメニュー上下の余白を消すには

  • 解決済 skyleaf

    (@skyleaf)


    ヘッダー画像上部のメニュー(グローバルナビゲーション)の上下の余白が空きすぎているので何とかしたいのですが、関連のサイトを調べて子テーマにコードを追加しても、上手くいきません。

    今のところ、ヘッダー周りの余白を以下の通り削除し、

    .site-header {
    padding-top: 0rem;
    padding-bottom: 0rem;
    }

    メニュー周辺の余白も、以下の2か所で削除してみした。

    .main-navigation {    
    margin-top: 0;
    margin-top: 0rem;
    }

    .main-navigation li {
    margin-top: 0px;
    margin-top: 0rem;
    line-height: 1;
    }

    その結果、多少は余白が狭くなったのですが、それでも空きすぎています。
    また、以下の部分も追加してみたのですが、メニューがおかしくなってしまう(メニューの項目同士が間隔なくくっついてしまう)ため、今は削除しました。

    .main-navigation a {
    display: block;
    line-height: 1.3125;
    outline-offset: -1px;
    padding: 0em 0;
    }

    ちなみに、プラグインなどは全て最新で、一度停止させ、キャッシュも削除しましたが、上手くいきません。
    どうぞよろしくお願い致します。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • CG

    (@du-bist-der-lenz)

    サイトの説明の長さによっては開きを感じるでしょう。ヘッダー部分全体の高さを調整するのがいいのかもしれません。

    @media screen and (min-width: 61.5625em) {
    	.site-main {
    		margin-bottom: 7.0em;
    	}
    
    	.site-header {
    		padding: 5.25em 4.5455%;
    	}
    
    	.site-branding,
    	.site-header-menu,
    	.header-image {
    		margin-top: 1.75em;
    		margin-bottom: 1.75em;
    	}

    しかし、このテーマはモバイルを優先したデザインとしてモバイルフレンドリーを考慮して%調整になっているのではないかしら。その分、デスクトップでは大柄に感じるのでしょうか。

    トピック投稿者 skyleaf

    (@skyleaf)

    早速のご返信、誠にありがとうございます!

    頂いたコードを張り付けてみたところ、最初より長くなってしまったのですが、
    数値のところを色々変えてみたところ、理想通りのバランスになりました!!
    (ちなみに、以下のようにしてみました)

    @media screen and (min-width: 61.5625em) {
    .site-main {
    margin-bottom: 0em;
    }

    .site-header {
    padding: 0em 4%;
    }

    .site-branding,
    .site-header-menu,
    .header-image {
    margin-top: 0.7em;
    margin-bottom: 0em;
    }

    昨日から半日、悩んでいたので、本当にありがたいです。
    お世話になりました<m(__)m>

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「Twenty Sixteenのメニュー上下の余白を消すには」には新たに返信することはできません。