Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

[Bootstrap 4] メニューをTopに固定する

前提として、wordpressのテーマWP Bootstrap Starter フレームワークを使用しています。

navigationを固定するには、flex-top?それとも、stickey-top?

INDEX

公式サイトでは”fixed-top”

Bootstrap4 公式サイトhttps://getbootstrap.com/docs/4.0/examples/navbar-top-fixed/では、以下の様にclassにfixed-topを追記するとの事です。

<nav class="navbar navbar-expand-md navbar-dark fixed-top">

WP Bootstrap Starterでやってみる

header.phpにfixed-topを追記してみました。

<header id="masthead" class="site-header fixed-top 
<?php echo wp_bootstrap_starter_bg_class(); ?>" role="banner">

コンテンツと重なってしまったので、その分を追加しました。IE、Firefoxでも同様でした。

body { 
    padding-top: 4.5rem;
}

類似のカスタマイズ

jQuaryを使用し、スクロールするとナビゲーションがページの上部に固定(flex-top)され、ナビゲーションの高さが少し狭まる。というカスタマイズです。お役にたては嬉しいです。

よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる