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

WordPressテーマ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」の部分の値を変更することによって、下線のデザインを変更することができます。

【2本線のサンプル】

【破線のサンプル】

【点線のサンプル】

さいごに

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

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