dedede Shopify 無料テーマ”Brooklyn” でヘッダーを固定する
shopifyのヘッダーを固定する方法をまとめております。できるだけ初心者でも簡単にできるように、六行程度のコードで実装しました。上の動画のようにヘッダー固定できます。レスポンシブについても同様に固定されます。
まだプロックエディター上の設定では固定できないようです(2021.02.22現在)ので少しだけコードをいじって変更しました。編集ファイルは Assets/theme.scss.liquid で、これ一つに数行程度追加すればできます。
設定手順
念の為詳細に書いておきます。管理画面の“オンラインストア” → アクション → コードを編集する を選んでください。
次にAssetsフォルダにある、theme.scss.liquidを選びます。大量にコードが書いてありますが一番下まで行って、以下のコードをコピペOKです。
以下のコードではimportantを乱用しているため、本来はメンテナンス性等を考慮するとあまりよろしくないコードです。が今回は簡単に編集できることを想定して作りましたためご容赦ください。
主にやっていることは3点です。
- ヘッダー位置を固定
- 親要素にz-indexを最大でつける（親じゃないと効きません)
- ヘッダーがフロートした分のmargin調整
/* ヘッダーを固定 */
.site-header{
width:100%;
position:fixed;
background-color:#fefefe!important;//ヘッダーの背景色です。任意
padding:5px!important;//任意
a{ //ヘッダの文字色変更
color:#3e3e3e!important;//任意
}
}
/*親要素にz-indexをつけてヘッダーが常に上に来るように設定 */
.header-container{
z-index:2147483647!important;//親要素にzindexをつける
}
/*注意！各ページにヘッダー高さ分のmarginを入れる。ページによって要素が若干違うので、対応するクラス名を
追加してください */
.product-single,.sc-pRgDJ,#CollectionSection,.main-content>.wrapper>.grid{
margin-top: 100px;//この値は自分のヘッダーの高さ+20px程度を目安に設定してください。
}
