content logo

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>
</html>
Preview