グローバルナビをスライドの下に配置したカスタマイズ例③

グローバルナビをスライドの下に配置したカスタマイズ例③

飾り枠

グローバルナビをスライドの下に配置したカスタマイズ例③

ナビメニューの項目を帯状で白抜き文字にして目立つようにした第3弾です。

ナビメニューの項目を帯状で白抜き文字にして目立つようにした第3弾です。

① と ③ の違いは CSS だけです。ブロック構成は同じです。

以下、自分用の備忘録です。

ブロック構成

ブロック構成

カスタム CSS

.sotowaku {
position: relative;
}

#menu_after_slider {
  display: none;
}

.kazari {
display: none;
}

@media (min-width: 992px) {

.kazari {
display: block;
z-index: 2;
position: absolute;
bottom: 50px;
margin: 0 calc(50% - 50vw);
width: 100vw;
}

.kazari .wp-block-image {
margin-bottom: 0;
}

.kazari img {
width: 100vw;
}

#menu_after_slider {
  display: flex;
  justify-content: center;
  z-index: 10;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  padding: 5px 0;
  background-color: var(--vk-color-primary-vivid);
}

#menu_after_slider .menu-header-navigation-container ul {
  list-style: none;
  margin: 0;
  display: flex;
}

#menu_after_slider .menu-header-navigation-container ul li {
  margin: 0 5px 0 5px;
  padding: 10px;
}

#menu_after_slider .menu-header-navigation-container ul li:not(:first-child) a:before {
  content: "/";
  position: relative;
  left: -30px;
  top: 0px;
}

#menu_after_slider .menu-header-navigation-container ul li a span {
  padding-bottom: 3px;
}

#menu_after_slider .menu-header-navigation-container ul li.current-menu-item a span {
  border-bottom: 1px solid #fff;
}

#menu_after_slider .menu-header-navigation-container ul li:hover a span {
  border-bottom: 1px solid #fff;
}

#menu_after_slider .menu-header-navigation-container ul li:hover a i {
    transform: rotateX(360deg);
    transition: all 1.5s ease-out;
}

#menu_after_slider .menu-header-navigation-container ul>li a {
  padding: 0 0.8em;
  color: #fff;
  text-decoration: none;
  display: block;
  height: unset;
  font-size: 18px;
}

}

関連記事

グローバルナビをスライドの下に配置したカスタマイズ例①

スライダーの下にナビゲーションメニューを配置してみました。それだけだとちょっとさびしかったので、スライダーには飾り枠をつけてあります。

グローバルナビをスライドの下に配置したカスタマイズ例②

スライダーの下にナビゲーションメニューを配置してみました。ナビメニューの項目を目立つようにした第2弾です。

グローバルナビをスライドの下に配置したカスタマイズ例④

スライドショーの下にナビゲーションメニューを配置してみました。VK Blocks Pro のスライダーを CSS を使ったスライドショーに置き換えてみました。

サイト運営者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス 代表
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

WordPress を使用したサイト制作・カスタマイズは全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・PHP・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。

» ご相談・お問い合わせはこちらからどうぞ