Cocoonのグローバルナビのカスタマイズ方法(ヘッダー固定、ホバー時に下線)

WordPressテーマCocoonのグローバルナビ(ヘッダーメニュー)のカスタマイズを紹介します。
画面スクロール時にヘッダーを上部固定表示にする方法と、マウスホバー時に下線をつける方法です。

CSS(スタイルシート/style.css)などの編集は必ず子テーマで行って下さい。
Cocoonテーマのダウンロード | Cocoon
スポンサーリンク

カスタマイズ内容

Cocoonのデフォルトでは、画面をスクロールするとへッダーのグローバルナビが消えてしまうので、グローバルナビを画面上部に固定するカスタマイズを行いました。

また、デフォルトだとマウスホバー時にメニュー背景色が変わるのですが、背景色は変えずに下線を表示するデザインに変更しました。

【カスタマイズ後】

Cocoonでグローバルナビ(ヘッダー)を上部固定表示する方法

グローバルナビ(ヘッダー)を上部固定表示する方法はいくつかありますが、今回はCSSとJavascriptを使った方法を紹介します。

コピペでOKです。

style.css、javascript.jsをWordpress管理画面左側の[外観]ー[テーマエディター]で編集するか、FTPクライアントソフトなどでダウンロード、編集、アップロードをして下さい。

CSS

/************************************
** ヘッダーナビ
************************************/
/*固定*/
.navi{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.navi.fixed{
    position: fixed;
    top: 0;
    z-index: 10000;
    opacity:0.9;
    padding:20px 0;
}

Javascript

//ヘッダー固定
var _window = $(window),
_header = $('.navi'),
heroBottom;

_window.on('scroll',function(){
heroBottom = $('.hero').height();
if(_window.scrollTop() > heroBottom){
_header.addClass('fixed'); 
}
else{
_header.removeClass('fixed'); 
}
});

_window.trigger('scroll');

こちらのサイトを参考にさせていただきました。
ヘッダー・ナビゲーションを固定表示させるアイデア5つ – WEBDESIGNDAY

グローバルナビのマウスホバー時のデザイン変更方法

次に、グローバルナビのマウスホバー時のデザインの変更方法です。
ホバー時に背景色を変えずに、下線をつけています。

こちらのカスタマイズはCSSのみです。
グローバルナビの上部固定化をした場合は、そのコードのすぐ下に貼り付けておくと分かりやすいと思います。

CSS

/*ナビメニュー下線*/
.navi-in a:hover {
background:none;
border-bottom:solid 1px #333;
transition: all .2s ease;
}
.navi-in>ul .sub-menu {
background-color: #fff;
opacity: 0.95;
padding-bottom:3px;
}

「transition: all .2s ease;」の部分ではトランジション(アニメーション)のオプションを指定しています。
.2sの数字を変更することで、トランジションの時間(秒数)を変更することができます。

また、「border-bottom : solid 1px #333」の部分の値を変更することによって、下線のデザインを変更することができます。

【ボーダースタイル】

  • solid:1本線
  • double:2本線
  • dashed:破線
  • dotted:点線
【2本線のサンプル】
【破線のサンプル】
【点線のサンプル】

さいごに

グローバルナビの上部固定とマウスホバー時のデザインをまとめて紹介しましたが、必要な部分だけコピペしたり色やデザインを変更したりして、使ってみてください。

質問はコメントでも受け付けています。

Comments

  1. 初めまして。

    この記事を参考にさせていただき、やりたかったナビ固定ができました!
    ブログデザインもとても素敵です。

    まだまだ初心者ですが、綺麗なブログを作れるように頑張りたいと思います。

    有益な情報を掲載くださりありがとうございました!

    • はじめまして、コメントありがとうございます!
      お役に立ててよかったです。
      私もよく他の人の記事を参考にしているので、このブログでも参考になるような記事を書いていきたいと思います。
      機会があればまた見てみてください!

タイトルとURLをコピーしました