WordPress グローバルメニューの完全固定化

wordpress

cocoon」のテーマを使っているが、用意されてるメニューの動きに自分の思うようなパターンがなかった。メニューを固定して追従してくれるパターンが近かったのだが、スクロールしてしばらくしてからじゃないと固定化されない。求めてるのはコレじゃない。一切動かない完全追従型のやり方をさがしていたら出くわしたのでリンクを張り付けておく。正直自分の備忘はいらなくて、リンクだけで良いと思ったが、記事がなくなると難儀なのでコピペさせていただいた。

当サイトの上部メニューの動きのようになる
メニュー位置にあるアドセンス広告がスマホの画面の5割を占拠したままスクロールしても永遠と表示される状態になったので一旦取止めた

設定方法

設定前の注意事項など

  • 編集するstyle.cssのテーマは「cocoon child」を選択。
  • テキストへのコピペでもなんでもいいのでバックアップを取得しておくが吉。
  • GoogleAdsenseとサブメニューの組み合わせが駄目。サブメニューが広告の上に表示されると誤クリック誘発として、ポリシー違反になる可能性がある。
  • 以下の内容は本家をそのまんまコピーなので、必要に応じて取捨選択+カスタマイズするといい(css素人なのでわからんw)。

style.css

  • [外観]-[テーマファイルエディタ]
 /* ロゴの大きさ・幅に関するもの */
.header-container-in.hlt-top-menu .logo-header img {
  max-height: 100%;
  height: auto;
  max-width: 210px;
  vertical-align: middle;
  margin: 20px 0;
}
#header-container {
  box-shadow: 0 0 10px rgba(30, 30, 30, .1);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 10;
}
.site-name-text-link {
  color: #fff;
}
.navi {
  background: none;
}
.navi-in > ul .sub-menu {
  background: #fff;
  box-shadow: 0 0 10px rgba(30, 30, 30, .1);
}
.navi-in > ul li {
  width: auto;
}
.navi-in a {
  font-size: 13px; /* ナビ文字大きさ */
  font-weight: bold;
  position: relative;
  color: #fff; /* ナビ文字色 */
  padding: 0 20px;
  display: block;
  text-decoration: none;
}
.navi-in a:hover {
  background: none;
}
.navi-in a:before {
  position: absolute;
  left: 0;
  bottom: 6px;
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #fff; /* マウスON時の下線色 */
  transform: scale(0, 1);
  transition: 0.4s;
}
.navi-in a:hover:before {
  transform: scale(1);
}
.navi-in > ul .sub-menu a {
  color: #666; /* サブメニュー文字色 */
  font-size: 12px; /* サブメニュー文字の大きさ */
}
.navi-in > ul .sub-menu a:before {
  background: #42d5e7; /* サブメニューマウスON時の下線色 */
}
.header-container-in.hlt-top-menu .logo-header {
  max-height: 100%;
}
.header-small {
  opacity: 0.9;
}
.header-small .header-container-in.hlt-top-menu .logo-header img {
  max-width: 130px;
  margin: 10px 0;
}
#container {
  padding-top: 90px;
}
[id^="toc"]:target {
  padding-top: 85px;
  margin-top: -85px;
}

参考にしたサイト

【Cocoon】スマホヘッダー固定追尾!公式と別の方法で!
Cocoon限定!スマホ時にヘッダーを固定し、さらに追尾をしてくるカスタマイズです。そこにメニューボタンも入れてどこからでもメニューを開けるようにしました。下スクロール時にはヘッダーが隠れ、上スクロール時に表示されるようになっています。

コメント