AppStrap.

Header Bottom

To have the header at the bottom of the sceen on page load simply set/remove the following on the following elements:

• 1 Above the #header region add the following HTML, alter it as needed: View code example

  <div id="highlighted">
    <!--
    Image Banner:
    Use the the data-bg-img functionality to create a simple image banner
    Use spacer classes to make the banner larger with padding, allows for easy responsive changes too
    see: elements-ctas.htm
    
    To make the banner full height/screen add the attributes:
    data-toggle="full-height" data-offset="#header"
    -->
    <div class="bg-white overlay overlay-primary overlay-op-7 text-center px-3 py-5 py-lg-10 flex-valign"
         data-bg-img="assets/img/backgrounds/young-man-standing-in-front-of-concrete-wall-picjumbo-com.jpg" 
         data-css='{"background-position": "right bottom"}'
         data-toggle="full-height" data-offset="#header">
      <h2 class="display-4 text-white" data-animate="fadeIn" data-animate-delay="0.2">Choose <span class="font-weight-bold">AppStrap!</span></h2>
      <h3 class="text-grey font-weight-normal" data-animate="fadeIn" data-animate-delay="0.35">When your backs against the wall! </h3>
      <hr class="hr-inverse hr-lg w-20 mx-auto my-4 mb-5" data-animate="fadeIn" data-animate-delay="0.45" />
      <div class="col-md-6 mx-auto">
        <form id="callback-form" action="#" role="form">
          <div class="input-group input-group-lg">
            <label class="sr-only" for="callback-number">Your Number</label>
            <input type="tel" class="form-control" id="callback-number" placeholder="Your Number">
            <span class="input-group-append">
              <button class="btn btn-dark rounded-0" type="button"><i class="fa fa-phone mr-md-1"></i> <span class="d-none d-lg-inline-block">Get Callback</span></button>
            </span>
          </div>
          <small>or <a href="#content" data-toggle="scroll-link">find out more below</a></small>
        </form>
      </div>
    </div>    
  </div>

  copy code
• 2 If you want to header to not be visible at the bottom of the screen simply remove data-offset="#header" from the data-toggle="full-height" element.