【Bootstrap4】ヘッダを固定する方法

スポンサーリンク
 

ブロガーのかわん(@kawan0116)です。

先日、親戚の会社のWebサイトを制作しました。

で、親戚のWebサイトはBootstrap3で制作したのですが、Bootstrapの最新バージョンは「4」なのですね。

まだリリースされて間もないからか、情報があまりに無さすぎます(笑)

ま、公式サイトを見れば良いだけなのですが、英語で書かれていて僕は分からない・・・

前置きが長くなりましたが(笑)

さて、今日はBootstrap4でヘッダを固定する方法です。

これ、実装するのに1.5日ほどかかりました(笑)

それを5分位で説明しようと思います。

注意点

今回の方法は僕の環境で実現しているものです。

よって、皆さまの環境では上手くいかない場合があります。

その場合はごめんなさい。他サイト様の記事をご覧下さい。

なお、コードをいじることにより、思わぬ事態に遭遇する可能性があります。

よって、バックアップを取ってから作業して下さい。

何か問題が発生しても僕ではサポート出来ませんので自己責任で作業して下さい。

Bootstrap4でヘッダを固定する方法

まずは、ソースコードをご覧頂きます。

<header class="fixed-top">
    
    <nav class="navbar navbar-expand-md navbar-light">
        <h1><a href="" class="navvar-brand">Templage4.0</a></h1>
            
        <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
            <span class="navbar-toggler-icon"></span>
        </button>
    
        <div id="menu" class="collapse navbar-collapse justify-content-end">
            <ul class="navbar-nav">
                <li class="nav-item"><a href="#" class="nav-link">home</a></li>
                <li class="nav-item"><a href="#" class="nav-link">works</a></li>
                <li class="nav-item"><a href="#" class="nav-link">about</a></li>
            </ul>
        </div><!--menu-->
    </nav><!--nav-->
  </header>
  

ごちゃごちゃと書いていますが、headerに「class="fixed-top"」を付け加えるだけです。

これでヘッダが固定されるかと思います。

僕の場合は、ロゴ(h1タグ)グローバルメニュー(navタグ)「header」タグで囲んでいます。

で、headerタグに「class="fixed-top"」を付け加えています。

これでヘッダは固定されるかと思います。

まとめ

という事で、色々と書いてみました。

何が言いたいのかというと、親要素に対して「class="fixed-top"」を加えましょうってことが言いたかったんです(笑)

長々と書いてしまってごめんなさい。

なお、上でも述べましたが、作業の際はバックアップを取ってからにして下さいね。

何かトラブルが発生しても僕ではサポート出来ませんので、自己責任で作業して下さい。