【Bootstrap4】ヘッダを固定した時にコンテンツが重なってしまう場合の解決法

スポンサーリンク
 

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

今回は、Bootstrap4でヘッダを固定した時にコンテンツが重なってしまう時の解決法です。

注意点

今回の方法は、僕の環境で上手くいっています。しかし、皆さまの環境では上手くいかない場合があります。

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

また、コードをいじる為、失敗する可能性があります。よって、バックアップをしてから作業して下さい。

万が一不具合が発生しても僕ではサポート出来ない為、自己責任で行なって下さい。

HTML

ヘッダ部分のHTMLは以下になります。

<header class="fixed-top">
   <nav class="navbar navbar-expand-md navbar-light">
      <h1><a href="index.html" class="navbar-brand">HTML Coder Kawan</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><a href="index.html" class="home">home</a></li>
               <li><a href="#works" class="icon">works</a></li>
               <li><a href="#about" class="icon">about</a></li>
          </ul>
        </div><!--menu-->
     </nav>
</header>

ゴチャゴチャと書いていますが、「fixed-top」でヘッダを固定しています。

<header class="fixed-top">

このままの状態だと、ヘッダとコンテンツが重なってしまいます。

CSS

ヘッダの高さは、標準で50px(だったと思う・・・)なので、最低でも50pxはコンテンツを下げる必要があります。

では、CSSにどうやって書くのかというと以下になります。

body {
    padding-top: 50px;
}

bodyに対して、ヘッダの高さの分だけ「padding-top」を指定します。

なお、50px以上であれば何でも良いです。僕の場合は70pxにしています。

たったこれだけです。簡単ですね。

まとめ

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

簡単に言うと、ヘッダの高さの分だけpadding-topを書きましょうねってことです(笑)

長々と書いてごめんなさい・・・

なお、何度も言いますがコードをいじるので思わぬ事態に遭遇する可能性があります。

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

トラブルが発生しても僕ではサポート出来ませんので、自己責任で行なって下さいね。