Div poping over header

Issue

The Issue:

I’m building a responsive website and when the window is resized small, the first section pops up and covers the header.

Issue Summary:

First section is covering header when resized.

The Question: Clearly stated

I would like to know the reason that this is occurring and how I can fix it.

CodePen Example Reproducing Issue:

http://codepen.io/anon/pen/MwQGBM

-Included Code-

HTML:

      <head>
        <title>High Performance Floors | Home</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      </head>

      <body>
        <section id="wrapper">
          <!--=====================================================
              START Navigation
          ======================================================-->
          <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">High Performance Floors</a>
              </div>
              <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#about">Architects & Builders</a></li>
                  <li><a href="#contact">Image Gallery</a></li>
                  <li><a href="#">Contact Us</a></li>
                </ul>
              </div>
              <!--/.nav-collapse -->
            </div>
          </nav>
          <!--=====================================================
              END Navigation
          ======================================================-->

          <!--=====================================================
              START Header
          ======================================================-->
          <header class="main-header"><img src="images/icons/logo2.png"></header>
          <!--=====================================================
              End Header
          ======================================================-->
        </section>


        <!--=====================================================
                START  Main Container
        ======================================================-->
        <section>
          <div class="row">
            <div class="col-md-7">
              <div class="block-light block-shadow">
                <h3>Extreme Flooring and Surfaces</h3>

                <p>High Performance Floors of Jacksonville, Florida, is a locally owned and family-operated business specializing in both residential and commercial concrete and surface-coating solutions.</p>

                <p>We are a small group of highly motivate individuals who aim to provide our customers with the best service, products and overall experience in the market. To have one of our representatives assist you with your concrete flooring and surface
                  requirements please contact us by calling (904) 386-2089 or fill out our Online Quote Request Form for a quick email response.</p>
              </div>
            </div>
            <!-- End Col -->

            <div class="col-md-5">
              <div class="block-light block-shadow">
                <h3>Extreme Concrete</h3>
                <img class="pull-left" src="images/icons/main_page_sub_image1_stain.png">
                <h4>Acid Stained:</h4>
                <p>Kemiko Stone Tone Stain transforms an ordinary concrete slab into a luxurious floor that resembles marble or glazed stone at a fraction of the cost.</p>
              </div>
            </div>
          </div>
          <!-- End Row -->

        </section>
        <!--=====================================================
                END Main Container
        ======================================================-->

Solution

Remove: “float: left;” from .main-header in the css/Sass and it will fix your issue.

Answered By – DasBeasto

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.