Home How to use Sitemap About Us

Feel The Power


content logo
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
FIND US
LINK US
download Link to us:
Site Logo
Please put this code in your page.