【Arkhe】ヘッダーメニューにホバーすると白い下線が引かれるCSSカスタマイズ(アルケー)

ホバーで白い下線が引かれるようにしたい、、、

WordPressテーマ「Arkhe(アルケー)」では、デフォルト設定でヘッダーメニューにホバーするとテーマのメインカラーにフォントカラーが変更されるようになっています。

今回は、ヘッダーメニューにホバーすると白い下線が引かれるCSSカスタマイズ方法をご紹介します!

目次

【Arkhe】ヘッダーメニューカスタマイズCSS

このままコピペOK!

/* ナビゲーションリストアイテムの基本スタイル */
.c-gnav li {
    list-style: none; /* リストマーカーを非表示 */
    padding: 0.5em 1em; /* 内側の余白 */
}

/* ナビゲーションリンクの下線(ホバーアニメーション用) */
.c-gnav__a::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 0.3px;
    background: #fff; /* 白い下線 */
    bottom: -1px;
    transform: scale(0, 1); /* 初期状態で非表示 */
    transform-origin: left top;
    transition: transform 0.3s; /* アニメーション */
}

/* ホバー時に下線を表示 */
.c-gnav__a:hover::after {
    transform: scale(1, 1);
}

/* 現在のページに下線を常時表示 */
.c-gnav__a.current::after,
.c-gnav__li.current-menu-item > .c-gnav__a::after {
    transform: scale(1, 1);
}

/* トップページでは現在地表示の下線を非表示にする */
.home .c-gnav__a.current::after,
.home .c-gnav__li.current-menu-item > .c-gnav__a::after {
    transform: scale(0, 1) !important;
}

/* ホバー・フォーカス時の文字色変更 */
.c-gnav__li.-current, 
.c-gnav__li.focus, 
.c-gnav__li:hover {
    color: #fff;
}

/* サブメニューでは下線アニメーションを無効化 */
.sub-menu .c-gnav__a::after {
    content: none !important;
    display: none !important;
    background: none !important;
    transform: none !important;
    transition: none !important;
}

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次