Sticky Fixed Menu Bar

Add a Sticky Fixed Menu Bar while scrolling on website or blogger. Let us follow the below steps.

Step 1: Go to Blogger Click the Dashboard then
Step 2: Now Click on Template->Edit HTML-> Proceed
Step 3: Now Find this code ]]></b:skin> by pressing Ctrl + F
Step 4: Copy the code from below and Paste it Before/above ]]></b:skin>

/** css style**/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
font-family: Helvetica, Arial, Tahoma, sans-serif;
font-size: 62.5%;
line-height: 1;
color: #515151;
}

br { display: block; line-height: 1.6em; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; height: auto; width: 100%; }

p {
font-family: Georgia, serif;
font-size: 1.75em;
line-height: 1.7em;
color: #414141;
margin-bottom: 22px;
}

h1 {
font-size: 3.1em;
margin-bottom: 15px;
}

#logo {
display: block;
float: left;
font-family: 'Kalam', 'Trebuchet MS', sans-serif;
color: #fff;
font-weight: normal;
font-size: 2.85em;
line-height: 80px;
}

/** page structure **/
.wrap {
display: block;
margin: 0 auto;
max-width: 800px;
padding: 0 10px;
}

#content {
padding: 110px 0;
}

#header {
display: block;
width: 100%;
height: 80px;
background: #4e5f81;
}
.fixed{
position: fixed;
z-index: 10;
right: 0;
left: 0;
top: 0;
}

#navmenu {
display: block;
float: right;
}
#navmenu li {
display: block;
float: left;
}

#navmenu li a {
display: block;
float: left;
padding: 0 20px;
font-size: 1.4em;
line-height: 80px;
font-weight: bold;
color: #fff;
text-decoration: none;
}

#navmenu li a:hover {
background: #617398;
}

/** simple responsive updates **/

@media screen and (max-width: 500px) {
#navmenu li a { font-size: 1.2em; padding: 0 15px; }

#logo { font-size: 2.1em; }

h1 { font-size: 2.7em; }
p { font-size: 1.6em; }
}

/** headroom.js animated styles **/
.slide{
-webkit-transition:all .25s ease-in-out;
-moz-transition:all .25s ease-in-out;
-o-transition:all .25s ease-in-out;
transition:all .25s ease-in-out;
}

.slide--reset{
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0);
}

.slide--up{
-webkit-transform:translateY(-100%);
-ms-transform:translateY(-100%);
transform:translateY(-100%);
}

.animated{
-webkit-animation-duration:.5s;
-moz-animation-duration:.5s;
-o-animation-duration:.5s;
animation-duration:.5s;
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
}

@-webkit-keyframes slideDown{
0%{ -webkit-transform:translateY(-100%)}
100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes slideDown{
0%{-moz-transform:translateY(-100%)}
100%{-moz-transform:translateY(0)}
}
@-o-keyframes slideDown{
0%{-o-transform:translateY(-100%)}
100%{-o-transform:translateY(0)}
}
@keyframes slideDown{
0%{transform:translateY(-100%)}
100%{transform:translateY(0)}
}

.animated.slideDown{
-webkit-animation-name:slideDown;
-moz-animation-name:slideDown;
-o-animation-name:slideDown;
animation-name:slideDown;
}
@-webkit-keyframes slideUp{
0%{-webkit-transform:translateY(0)}
100%{-webkit-transform:translateY(-100%)}
}

@-moz-keyframes slideUp{
0%{-moz-transform:translateY(0)}
100%{-moz-transform:translateY(-100%)}
}

@-o-keyframes slideUp{
0%{-o-transform:translateY(0)}
100%{-o-transform:translateY(-100%)}
}
@keyframes slideUp{
0%{transform:translateY(0)}
100%{transform:translateY(-100%)}
}

.animated.slideUp{
-webkit-animation-name:slideUp;
-moz-animation-name:slideUp;
-o-animation-name:slideUp;
animation-name:slideUp;
}

@-webkit-keyframes swingInX{
0%{-webkit-transform:perspective(400px) rotateX(-90deg)}
100%{-webkit-transform:perspective(400px) rotateX(0deg)}
}
@-moz-keyframes swingInX{
0%{-moz-transform:perspective(400px) rotateX(-90deg)}
100%{-moz-transform:perspective(400px) rotateX(0deg)}
}
@-o-keyframes swingInX{
0%{-o-transform:perspective(400px) rotateX(-90deg)}
100%{-o-transform:perspective(400px) rotateX(0deg)}
}
@keyframes swingInX{
0%{transform:perspective(400px) rotateX(-90deg)}
100%{transform:perspective(400px) rotateX(0deg)}
}

.animated.swingInX{
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ie-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
-webkit-backface-visibility:visible !important;
-webkit-animation-name: swingInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: swingInX;
-o-backface-visibility: visible !important;
-o-animation-name: swingInX;
backface-visibility:visible !important;
animation-name: swingInX;
}

@-webkit-keyframes swingOutX{
0%{-webkit-transform:perspective(400px) rotateX(0deg)}
100%{-webkit-transform:perspective(400px) rotateX(-90deg)}
}

@-moz-keyframes swingOutX{
0%{-moz-transform:perspective(400px) rotateX(0deg)}
100%{-moz-transform:perspective(400px) rotateX(-90deg)}
}
@-o-keyframes swingOutX{
0%{-o-transform:perspective(400px) rotateX(0deg)}
100%{-o-transform:perspective(400px) rotateX(-90deg)}
}
@keyframes swingOutX{
0%{transform:perspective(400px) rotateX(0deg)}
100%{transform:perspective(400px) rotateX(-90deg)}
}

.animated.swingOutX{
-webkit-transform-origin: top;
-webkit-animation-name: swingOutX;
-webkit-backface-visibility:visible !important;
-moz-animation-name: swingOutX;
-moz-backface-visibility:visible !important;
-o-animation-name: swingOutX;
-o-backface-visibility: visible !important;
animation-name: swingOutX;
backface-visibility:visible !important}

@-webkit-keyframes flipInX{
0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}
100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1}
}
@-moz-keyframes flipInX{
0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}
100%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1}
}
@-o-keyframes flipInX{
0%{-o-transform:perspective(400px) rotateX(90deg);opacity:0}
100%{-o-transform:perspective(400px) rotateX(0deg);opacity:1}
}
@keyframes flipInX{
0%{transform:perspective(400px) rotateX(90deg);opacity:0}
100%{transform:perspective(400px) rotateX(0deg);opacity:1}
}

.animated.flipInX{
-webkit-backface-visibility:visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInX;
-o-backface-visibility: visible !important;
-o-animation-name: flipInX;
backface-visibility: visible !important;
animation-name: flipInX;
}

@-webkit-keyframes flipOutX{
0%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1}
100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}
}
@-moz-keyframes flipOutX{
0%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1}
100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}
}
@-o-keyframes flipOutX{
0%{-o-transform:perspective(400px) rotateX(0deg);opacity:1}
100%{-o-transform:perspective(400px) rotateX(90deg);opacity:0}
}
@keyframes flipOutX{
0%{transform:perspective(400px) rotateX(0deg);opacity:1}
100%{transform:perspective(400px) rotateX(90deg);opacity:0}
}

.animated.flipOutX{
-webkit-animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
-moz-animation-name: flipOutX;
-moz-backface-visibility: visible !important;
-o-animation-name: flipOutX;
-o-backface-visibility: visible !important;
animation-name: flipOutX;
backface-visibility: visible !important;
}

@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-200px)}60%{opacity:1;-webkit-transform:translateY(30px)}80%{-webkit-transform:translateY(-10px)}100%{-webkit-transform:translateY(0)}}

@-moz-keyframes bounceInDown{0%{opacity:0;-moz-transform:translateY(-200px)}60%{opacity:1;-moz-transform:translateY(30px)}80%{-moz-transform:translateY(-10px)}100%{-moz-transform:translateY(0)}}

@-o-keyframes bounceInDown{0%{opacity:0;-o-transform:translateY(-200px)}60%{opacity:1;-o-transform:translateY(30px)}80%{-o-transform:translateY(-10px)}100%{-o-transform:translateY(0)}}

@keyframes bounceInDown{0%{opacity:0;transform:translateY(-200px)}60%{opacity:1;transform:translateY(30px)}80%{transform:translateY(-10px)}100%{transform:translateY(0)}}

.animated.bounceInDown{
-webkit-animation-name:bounceInDown;
-moz-animation-name:bounceInDown;
-o-animation-name:bounceInDown;
animation-name:bounceInDown;
}
@-webkit-keyframes bounceOutUp{
0%{-webkit-transform:translateY(0)}
30%{opacity:1;-webkit-transform:translateY(20px)}
100%{opacity:0;-webkit-transform:translateY(-200px)}
}
@-moz-keyframes bounceOutUp{
0%{-moz-transform:translateY(0)}
30%{opacity:1;-moz-transform:translateY(20px)}
100%{opacity:0;-moz-transform:translateY(-200px)}
}
@-o-keyframes bounceOutUp{
0%{-o-transform:translateY(0)}
30%{opacity:1;-o-transform:translateY(20px)}
100%{opacity:0;-o-transform:translateY(-200px)}
}
@keyframes bounceOutUp{
0%{transform:translateY(0)}
30%{opacity:1;transform:translateY(20px)}
100%{opacity:0;transform:translateY(-200px)}
}

.animated.bounceOutUp{
-webkit-animation-name:bounceOutUp;
-moz-animation-name:bounceOutUp;
-o-animation-name:bounceOutUp;
animation-name:bounceOutUp;
}

/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

Step 5: Now Find this code </head> by pressing Ctrl + F
Step 6: Copy the code from below and Paste it Before </head>

<script type="text/javascript">
!function(a,b){"use strict";function c(a){this.callback=a,this.ticking=!1}function d(a){if(arguments.length<=0)throw new Error("Missing arguments in extend function");var b,c,e=a||{};for(c=1;c<arguments.length;c++){var f=arguments[c]||{};for(b in f)e[b]="object"==typeof e[b]?d(e[b],f[b]):e[b]||f[b]}return e}function e(a){return a===Object(a)?a:{down:a,up:a}}function f(a,b){b=d(b,f.options),this.lastKnownScrollY=0,this.elem=a,this.debouncer=new c(this.update.bind(this)),this.tolerance=e(b.tolerance),this.classes=b.classes,this.offset=b.offset,this.initialised=!1,this.onPin=b.onPin,this.onUnpin=b.onUnpin,this.onTop=b.onTop,this.onNotTop=b.onNotTop}var g={bind:!!function(){}.bind,classList:"classList"in b.documentElement,rAF:!!(a.requestAnimationFrame||a.webkitRequestAnimationFrame||a.mozRequestAnimationFrame)};a.requestAnimationFrame=a.requestAnimationFrame||a.webkitRequestAnimationFrame||a.mozRequestAnimationFrame,c.prototype={constructor:c,update:function(){this.callback&&this.callback(),this.ticking=!1},requestTick:function(){this.ticking||(requestAnimationFrame(this.rafCallback||(this.rafCallback=this.update.bind(this))),this.ticking=!0)},handleEvent:function(){this.requestTick()}},f.prototype={constructor:f,init:function(){return f.cutsTheMustard?(this.elem.classList.add(this.classes.initial),setTimeout(this.attachEvent.bind(this),100),this):void 0},destroy:function(){var b=this.classes;this.initialised=!1,a.removeEventListener("scroll",this.debouncer,!1),this.elem.classList.remove(b.unpinned,b.pinned,b.top,b.initial)},attachEvent:function(){this.initialised||(this.lastKnownScrollY=this.getScrollY(),this.initialised=!0,a.addEventListener("scroll",this.debouncer,!1),this.debouncer.handleEvent())},unpin:function(){var a=this.elem.classList,b=this.classes;(a.contains(b.pinned)||!a.contains(b.unpinned))&&(a.add(b.unpinned),a.remove(b.pinned),this.onUnpin&&this.onUnpin.call(this))},pin:function(){var a=this.elem.classList,b=this.classes;a.contains(b.unpinned)&&(a.remove(b.unpinned),a.add(b.pinned),this.onPin&&this.onPin.call(this))},top:function(){var a=this.elem.classList,b=this.classes;a.contains(b.top)||(a.add(b.top),a.remove(b.notTop),this.onTop&&this.onTop.call(this))},notTop:function(){var a=this.elem.classList,b=this.classes;a.contains(b.notTop)||(a.add(b.notTop),a.remove(b.top),this.onNotTop&&this.onNotTop.call(this))},getScrollY:function(){return void 0!==a.pageYOffset?a.pageYOffset:(b.documentElement||b.body.parentNode||b.body).scrollTop},getViewportHeight:function(){return a.innerHeight||b.documentElement.clientHeight||b.body.clientHeight},getDocumentHeight:function(){var a=b.body,c=b.documentElement;return Math.max(a.scrollHeight,c.scrollHeight,a.offsetHeight,c.offsetHeight,a.clientHeight,c.clientHeight)},isOutOfBounds:function(a){var b=0>a,c=a+this.getViewportHeight()>this.getDocumentHeight();return b||c},toleranceExceeded:function(a,b){return Math.abs(a-this.lastKnownScrollY)>=this.tolerance[b]},shouldUnpin:function(a,b){var c=a>this.lastKnownScrollY,d=a>=this.offset;return c&&d&&b},shouldPin:function(a,b){var c=a<this.lastKnownScrollY,d=a<=this.offset;return c&&b||d},update:function(){var a=this.getScrollY(),b=a>this.lastKnownScrollY?"down":"up",c=this.toleranceExceeded(a,b);this.isOutOfBounds(a)||(a<=this.offset?this.top():this.notTop(),this.shouldUnpin(a,c)?this.unpin():this.shouldPin(a,c)&&this.pin(),this.lastKnownScrollY=a)}},f.options={tolerance:{up:0,down:0},offset:0,classes:{pinned:"headroom--pinned",unpinned:"headroom--unpinned",top:"headroom--top",notTop:"headroom--not-top",initial:"headroom"}},f.cutsTheMustard="undefined"!=typeof g&&g.rAF&&g.bind&&g.classList,a.Headroom=f}(window,document);
</script>

Step 7: Now Find this code </head> by pressing Ctrl + F
Step 8: Copy the code from below and Paste it After </head>

<header id="header" class="header fixed">
    <div class="wrap">
      <div class="clearfix" style="width:100%;">
        <div id="logo">SomeLogo</div>

        <ul id="navmenu">
          <li><a href="javascript:void(0)">Home</a></li>
          <li><a href="javascript:void(0)">About Us</a></li>
          <li><a href="javascript:void(0)">Contact</a></li>
        </ul>
      </div>
    </div>
</header>

Step 9: Now Find this code </head> by pressing Ctrl + F
Step 10: Copy the code from below and Paste it Before </head>

<script type="text/javascript">
var header = document.querySelector("#header");

new Headroom(header, {
tolerance: {
    down : 2,
    up : 5
},
offset : 100,
classes: {
    initial: "slide",
    pinned: "slide--reset",
    unpinned: "slide--up"
}
}).init();
</script>