Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

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

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

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

Bootstrap

前提として、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)され、ナビゲーションの高さが少し狭まる。というカスタマイズです。お役にたては嬉しいです。

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

INDEX
閉じる