CSS（スタイルシート/style.css）などの編集は必ず子テーマで行って下さい。
→Cocoonテーマのダウンロード | Cocoon
→Cocoonテーマのダウンロード | Cocoon
カスタマイズ内容
【カスタマイズ後】
Cocoonでグローバルナビ（ヘッダー）を上部固定表示する方法
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
/*ナビメニュー下線*/
.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;
}【ボーダースタイル】
- solid：1本線
- double：2本線
- dashed：破線
- dotted：点線
【2本線のサンプル】
【破線のサンプル】
【点線のサンプル】
Comments
初めまして。
この記事を参考にさせていただき、やりたかったナビ固定ができました！
ブログデザインもとても素敵です。
まだまだ初心者ですが、綺麗なブログを作れるように頑張りたいと思います。
有益な情報を掲載くださりありがとうございました！
はじめまして、コメントありがとうございます！
お役に立ててよかったです。
私もよく他の人の記事を参考にしているので、このブログでも参考になるような記事を書いていきたいと思います。
機会があればまた見てみてください！
[…] 【関連記事】 ・Cocoonのグローバルナビのカスタマイズ方法（ヘッダー固定、ホバー時に下線） ・Cocoon カテゴリー・タグ表示のカスタマイズ方法とデザインサンプル7（アイキャッチラベ […]
[…] ・Cocoonのグローバルナビのカスタマイズ方法（ヘッダー固定、ホバー時に下線） ☆ヘッダー固定を参考にさせて頂きました。 […]
[…] Cocoonのグローバルナビのカスタマイズ方法（ヘッダー固定、ホバー時に下線） […]
[…] Cocoonのグローバルナビのカスタマイズ方法（ヘッダー固定、ホバー時に下線） […]
[…] ・Cocoonのグローバルナビのカスタマイズ方法（ヘッダー固定、ホバー時に下線） ☆ヘッダー固定を参考にさせて頂きました。 […]
[…] Cocoonのグローバルナビのカスタマイズ方法（ヘッダー固定、ホバー時に下線）Cocoonのグローバルナビ（ヘッダーメニュー）のカスタマイズを紹介します。画面スクロール時にヘッダーを […]