HTML&CSS swellテーマ WORDPRESS

【swell】PCでハンバーガーメニューを表示する

PCでハンバーガーメニューを表示する

swellの元のレスポンシブ設定は960pxからPCとスマホのヘッダーメニューが切り替わります。

@media (min-width: 960px){
.l-header__gnav{
    display:none;
  }
  .l-header__menuBtn.sp_{
	display: block !important;
    position: relative;
    top: 20px;     /*好みのサイズに調整*/
    right: 20px;   /*好みのサイズに調整*/
  }
    .c-iconBtn.-menu{
    display:flex;
  }
  .l-header .c-iconBtn.-menu{
    display:flex !important;
  }
  .p-spMenu {
    display: block !important;
}
}

PCとスマホヘッダーのブレイクポイントを変更する

PCでは通常メニューを表示し、1200px以下でハンバーガーメニューへ切り替わります。
メニュー項目が多く、横幅に収まりきらない場合はこちらで切替幅を変更してください。

@media (max-width: 1200px) {
 .l-header__gnav{
    display:none;
  }
  .l-header__menuBtn.sp_{
	display: block !important;
    position: relative;
    top: 20px;
    right: 20x;
  }
    .c-iconBtn.-menu{
    display:flex;
  }
  .l-header .c-iconBtn.-menu{
    display:flex !important;
  }
  .p-spMenu {
    display: block !important;
}
 }
@media (max-width: 959px) {
.l-header__menuBtn.sp_{
    top: 0px;
    right: 5px;
  }
}

-HTML&CSS, swellテーマ, WORDPRESS