Bootstrap Headers:

Bootstrap Header Menu with Dynamic Height

The top section of the web page in a website is called the header. Before, headers were known to be the top parts of the website in the shape narrow bars and strips which contained the necessary features of the site such as the logo, contact information and a call to action to advertise their services. As time went on and the web design industry changed, the modern designs turned the entire space above the fold of the website into the header. The header can have different sizes and can be optimized for different screen sizes and devices.

Of course, nowadays, most web designers use HTML CSS shrinking dynamic headers. These headers are designed in a way to change height according to the scroll position in a screen. In simple words, when you are at the top of the screen on let’s say a mobile phone, the header is displayed in full size but as soon as you scroll down the header shrinks into a narrower bar to make space for the main content in the web page.

the code in this post is known as a Bootstrap shrinking menu. It is a nice feature to have as it makes your website look more professional. When the user sees that you care about the aesthetic of the site and its usefulness, there is a higher chance that they would want to stay in your site and go through your content. now that you know how useful the code is, don’t hesitate and scroll down to enjoy this Bootstrap header dynamic height template.

Bootstrap Header Dynamic Height

Bootstrap Shrinking Menu

HTML CSS Shrinking Dynamic Header

<!-- This script got from frontendfreecode.com -->
<header class="l-head">
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <nav class="navi navbar" role="navigation">
        <div class="col-xs-4">
        <a href="http://frontendfreecode.com/" class="logo">
          Frontend
        </a>
        </div>
        <div class="col-xs-8">
        <ul class="menu nav nav-pills navbar-right">
          <li class="menu__item is-itemHov">HOME</li>
          <li class="menu__item is-itemHov">ABOUT</li>
          <li class="menu__item is-itemHov">SERVICE</li>
          <li class="menu__item is-itemHov">CONTACT</li>
        </ul>
        </div>
      </nav>
    </div>
  </div>
</div>
</header>
<main class="l-main">
  <div class="container section-1">
    <div class="row">
        <div class="main-msg jumbotron">
          <h1>BootStrap</h1>
          <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
          <a class="btn main-msg__btn is-itemHov" href="#" role="button">Download</a>
          <a class="btn main-msg__btn is-itemHov" href="#" role="button">Get Started</a>
        </div>
    </div>
  </div>
</main>
<section>
  <div class="container section-2">
    <div class="row">
      
    </div>
  </div>
</section><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

@import url(https://fonts.googleapis.com/css?family=Play);
/* Base Styles*/
html, body {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Play', sans-serif;
}

*, *:before, *:after {
  box-sizing: border-box;
}

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  color: white;
}
a:active {
  text-decoration: none;
}

li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}

/* Layout Styles*/
.l-head {
  position: fixed;
  padding-top: 20px;
  width: 100%;
  height: 100px;
  transition: all 1s;
}

.l-main {
  width: 100%;
  background: url("http://frontendfreecode.com/codes/files/mountain.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

/* Modules Styles*/
.logo {
  display: inline-block;
  margin-top: -10px;
  color: white;
  font-size: 35px;
  font-weight: bold;
  letter-spacing: 3px;
  text-shadow: 5px 2px 2px black;
}

.menu {
  padding: 0px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  transition: all 2s;
}
.menu__item {
  margin: 0px;
  padding: 10px 20px;
  font-weight: bold;
  text-align: center;
}

.section-1 {
  height: 768px;
}

.section-2 {
  height: 468px;
}

.main-msg {
  margin-top: 150px;
  text-align: center;
  background: rgba(225, 225, 225, 0.1);
}
.main-msg__btn {
  margin: 10px;
  padding: 10px 20px;
  color: inherit;
  font-weight: bold;
  text-align: center;
  background: rgba(175, 238, 238, 0.6);
}

/* State Styles*/
.is-menuSmaller {
  padding-top: 5px;
  height: 50px;
  background: rgba(175, 238, 238, 0.6);
}

.is-itemHov:hover {
  background: white;
}

function scroll() {
  window.addEventListener("scroll", function () {
    var header = document.querySelector("header"),
    nav = document.querySelector(".menu");
    scrolling = window.scrollY,
    cutOff = 10;
    if (cutOff < scrolling) {
      header.classList.add("is-menuSmaller");
      nav.style.backgroundColor = "transparent";
      console.log("test");
    } else {
      header.classList.remove("is-menuSmaller");
      nav.style.backgroundColor = "rgba(225, 225, 225, .6)";
    }
  });
}

scroll();

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<style>
@import url(https://fonts.googleapis.com/css?family=Play);
/* Base Styles*/
html, body {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Play', sans-serif;
}

*, *:before, *:after {
  box-sizing: border-box;
}

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  color: white;
}
a:active {
  text-decoration: none;
}

li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}

/* Layout Styles*/
.l-head {
  position: fixed;
  padding-top: 20px;
  width: 100%;
  height: 100px;
  transition: all 1s;
}

.l-main {
  width: 100%;
  background: url("http://frontendfreecode.com/codes/files/mountain.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

/* Modules Styles*/
.logo {
  display: inline-block;
  margin-top: -10px;
  color: white;
  font-size: 35px;
  font-weight: bold;
  letter-spacing: 3px;
  text-shadow: 5px 2px 2px black;
}

.menu {
  padding: 0px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  transition: all 2s;
}
.menu__item {
  margin: 0px;
  padding: 10px 20px;
  font-weight: bold;
  text-align: center;
}

.section-1 {
  height: 768px;
}

.section-2 {
  height: 468px;
}

.main-msg {
  margin-top: 150px;
  text-align: center;
  background: rgba(225, 225, 225, 0.1);
}
.main-msg__btn {
  margin: 10px;
  padding: 10px 20px;
  color: inherit;
  font-weight: bold;
  text-align: center;
  background: rgba(175, 238, 238, 0.6);
}

/* State Styles*/
.is-menuSmaller {
  padding-top: 5px;
  height: 50px;
  background: rgba(175, 238, 238, 0.6);
}

.is-itemHov:hover {
  background: white;
}
</style>

</head>
<body>
<header class="l-head">
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <nav class="navi navbar" role="navigation">
        <div class="col-xs-4">
        <a href="http://frontendfreecode.com/" class="logo">
          Frontend
        </a>
        </div>
        <div class="col-xs-8">
        <ul class="menu nav nav-pills navbar-right">
          <li class="menu__item is-itemHov">HOME</li>
          <li class="menu__item is-itemHov">ABOUT</li>
          <li class="menu__item is-itemHov">SERVICE</li>
          <li class="menu__item is-itemHov">CONTACT</li>
        </ul>
        </div>
      </nav>
    </div>
  </div>
</div>
</header>
<main class="l-main">
  <div class="container section-1">
    <div class="row">
        <div class="main-msg jumbotron">
          <h1>BootStrap</h1>
          <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
          <a class="btn main-msg__btn is-itemHov" href="#" role="button">Download</a>
          <a class="btn main-msg__btn is-itemHov" href="#" role="button">Get Started</a>
        </div>
    </div>
  </div>
</main>
<section>
  <div class="container section-2">
    <div class="row">
      
    </div>
  </div>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
function scroll() {
  window.addEventListener("scroll", function () {
    var header = document.querySelector("header"),
    nav = document.querySelector(".menu");
    scrolling = window.scrollY,
    cutOff = 10;
    if (cutOff < scrolling) {
      header.classList.add("is-menuSmaller");
      nav.style.backgroundColor = "transparent";
      console.log("test");
    } else {
      header.classList.remove("is-menuSmaller");
      nav.style.backgroundColor = "rgba(225, 225, 225, .6)";
    }
  });
}

scroll();
</script>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars

Feel The Power

Bootstrap Headers:

Bootstrap Header Menu with Dynamic Height

Bootstrap Header Dynamic Height

Bootstrap Shrinking Menu

HTML CSS Shrinking Dynamic Header