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

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

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

公式サイトでは”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;
}

類似のカスタマイズ

あわせて読みたい

[WordPress] スクロールでナビ固定。高さを変える。 良く見かけるナビゲーションだと思いますが、スクロールするとナビゲーションがページの上部に固定(flex-top)され、ナビゲーションの高さが少し狭まる。というカスタマ…

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