Sticky Scrolling Site Navigation Bar For Blogger

Advertisements

Yesterday We Published In Blogger Make Your Old Site Navigation Bar Scrollable & Sticky Which became a huge success as we were the first to introduce it and this is the reason why today this post will cover same thing which we discussed previously but today you don't need to read any thing.You can sit back and grap a bowl of popcorn watch while eating and enjoy the complete Video Tutorial. Which would cover every thing which we previously leaned from starting to very end.

The Video is optimized with my voice to make you understand quickly and more effectively.So Here is the video. 

For More Detailed Guidance Go To This Page:In Blogger Make Your Old Site Navigation Bar Scrollable & Sticky

Style Sheet Used In Video


/* MBL-Sticky-Navigation-Bar */
body, h1, h2, h3, p {
margin: 0;
padding: 0;
}

::selection {
background: #c00;
color:#fff;
}

::-moz-selection {
background: #c00;
color:#fff;
}


/* general styles */
body {
background: url(img/bgnoise_lg.png);
font: 20px 'Open Sans Condensed', Tahoma, Geneva, sans-serif;
     
}

a {
color:#c00;
text-decoration:none;
}


#MBL-Sticky-Navigation-Bar {
width:940px;
margin: 0 auto;

}

header {
text-align:center;
padding:70px 0;
}

header h1 {
color:#999;
text-shadow:0 0 0 transparent, 0 1px 0 #fff, 0 -1px 0 #555;
font-size:40px;
}

header h2 {
display:inline-block;
border: 1px dashed #999;
padding: 2px 10px 5px;
margin: 10px 0 0;
border-radius: 5px;
box-shadow: 0 1px 1px #fff;
font-size:20px;
}

nav {
background:url(img/nav-bg.png) no-repeat;
height: 90px;
width: 960px;
margin-left: -5px;
line-height:50px;
position: relative;
}

nav:after {
background:url(img/nav-shadow.png) top repeat-x;
position: middle;
height:30px;
width:980px;
left:10px;
top:60px;
content:'';
}

nav p {
padding: 0 70px;
}

nav a {
color:#fff;
text-shadow: 0 0 0 transparent, 0 -1px 1px #900;
}


#content {
background: #fff;
height: 1500px; /* presetting the height */
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

#content p {
padding:20px 60px;
}

.fixed {
position:fixed;
}

<!--
a {color:blue;}
a:hover {text-decoration: underline;color:#E1B2B2;}
--> 

JavaScript Used In Video



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>



<script type="text/javascript">



$(document).ready(function() {






//Calculate the height of <header>



//Use outerHeight() instead of height() if have padding

    var aboveHeight = $('header').outerHeight();
// when scroll
    $(window).scroll(function(){
//if scrolled down more than the header's height
        if ($(window).scrollTop() > aboveHeight){
// if yes, add "fixed" class to the <nav>
// add padding top to the #content (value is same as the height of the nav)
            $('nav').addClass('fixed').css('top','0').next().css('padding-top','60px');
        } else {
// when scroll up or less than aboveHeight, remove the "fixed" class, and the padding-top
            $('nav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});
</script>

Additional Elements Added in the Video



Simply added <nav> just above the Div id of Navigation Bar
Added </nav> just after Navigation Bar's ending </div> (DIV) Tag  

Still it is very much new and this is only the biggning we will surly publish more Scrolling navigation bars with more improved interface.If you still face any difficulties feel free to ask I would love to assist you till then peace blessing and happy Sticky Scrolling :)

Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

4 comments

April 12, 2012 at 8:29 AM

BUT HOW WE CAN REMOVE WIDGET BY ABU-FFARHAN

Editorial Team MOD
April 12, 2012 at 9:33 AM

Its off topic but What Widget you are talking about as ABU FARHAN has created lots of widget..Give us the Full Name So we can Help You,Thanks Pal

June 3, 2012 at 1:12 PM

Please help. I'm stuck on the third step. I'm searching for my category name on the edit HTML page but I cant find it. I pressed ctrl+f and typed in the name. It says it found it one time but it's not highlighted and I search the whole thing and cant see it....it's like it is hiding.

Editorial Team MOD
June 4, 2012 at 12:19 AM

@Pamela
Looks Like there are some bugs in your template. Can you please give us the download link of your template so we can help you more convincingly. Send us the link of your Blogger Template on Contact.mybloggerlab.com and We will Do all the Work, while you take rest. Peace and Blessings.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.