Bootstrap Header Menu with Dynamic Height

Bootstrap Headers: Bootstrap Header Menu with Dynamic Height

Those headers with fixed height might be somehow space consuming. Therefore, we have a solution here! Design the header menus with shrinking dynamic height. When the page is scrolled down, the height of the heading menu will reduce. When you return to top, it gets its initial height. Amazing!

#Bootstrap Header Dynamic Height #Bootstrap Shrinking Menu #HTML CSS Shrinking Dynamic Header

<!-- this script got from www.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://www.frontendfreecode.com">Frontend Code</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 www.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" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</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

RECENT CODES

Bootstrap Header Menu with Dynamic Height

Bootstrap Pricing Table with Color Change

Bootstrap Assigning Project List

Bootstrap Accordion Form Wizard

Bootstrap Grids with Various Hover Effect

Bootstrap Image Gallery with Zoom Effect

Bootstrap Users Profile with Tabs

Bootstrap Pricing Table with Zoom Effect

Bootstrap Shopping Cart Table

Bootstrap Dark/Light Switching Header Menu

Feel The Power

Bootstrap Headers: Bootstrap Header Menu with Dynamic Height

What are You Looking for?

Watch how to Create the Tool!

The Tool Demo