In Blogger Make Your Old Site Navigation Bar Scrollable & Sticky

Advertisements

2012 is the year of Information technology all popular websites like Google,Facebook are making there site look more demanding with latest technology this is the reason why Google completely changed  looks of there products i.e YouTube , Blogger and even renamed Android Market to Google Play Store.Google not only changed the looks of there old products but also introduced Google Plus which become the true competitor of Facebook.Even Facebook try to make some changes which was not as successful as Google but still they were pretty much extra ordinary.Facebook introduced timeline which has a most important feature and it is Scrollable Navigation bar
  • which allows you to navigate the page with out going to top of the page.
  • when you scroll down the page it will keep following you till very end.
  • which will only appear when you scroll down the page.
  • if you scroll back to top it will get back to its original position.
These are the feature which do attract us although Google Dynamics has Scrollable sticky bar but it was not available for Blogger Custom Template 

After the research work of 3 days and today's 5 hours of coding Finally I was able To Create MBL Scrollable Sticky Navigation Bar For Blogger.It basically works on jQuery when ever you scroll down it converts your current navigation bar into a scrolling bar and when you go back to top it comes back to its original position.So let us starting optimizing our blog for Scrollable Sticky Navigation Bar.it will just Transform your Old navigation Bar into a Scrollable Navigation Bar.


I know you would love to preview The MBL Scrollable Sticky Navigation Bar take a look at it.Remember:Your navigation bar remains the same but it will become Scrollable and sticky


Important:To Get the Preview Please Scroll the DEMO pages and you will be able to see the Scrollable Sticky Navigation Bar. 

Adding CSS Style In Template


First we will add styles sheet to the blogger template i.e CSS so first go to
  • Blogger.com >> YourBlog >> Template >> EDIT HTML >> Proceed 
  • Search For ]]></b:skin> and just above it paste the following code and save the template

/* 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;}
-->


Adding JQuery To Your Template:

Now We need to insert Jquery as it is the only thing which is responsible to make your navigation bar Scrollable.
  • Go To Blogger.com >> Your Blog >> Layout >>  Add A Gadget  
  • Add Html/JavaScripts >> Then paste the following code there >> And save it.

<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>



Making Your OLD Navigation Bar Scrollable:

Now this is the most important step where we will covert your Static navigation bar into a scrolling navigation bar.simply go to
  • Blogger.com>>Template>>EDIT HTML>>Proceed>>
  • Now Search For your Navigation Category Name i.e Home or any other let us take example of MyBloggerlab.com in the navigation bar I have Blogger Tricks as my second main category so I will search Blogger Tricks in the template Remember:The  category  you are searching should be the first one or second one in your navigation bar.
  • When you find it you would be able to see I.e <div id='Navbar'>  which is the ID of your navigation bar. .Remember:You Might not get the same div Id as all the templates are differently coded but it would be related to it i.e  <div id='Nav'> ,  <div id='Navcontainer'>  id='NavbarMenu'>  and etc
  • Now just above the div id of your navigation bar paste <nav> 
  • Just after adding <nav> tag search for </div> which will be at the end of your navigation coding. Remember:You need to find just next </div>  closing tag to your navigation settings
  • Replace </div> with  </div></nav>
  • And now Save your Template go and preview your template and it will be a photo finish

Still Confused :( Watch This Video Tutorial :)


So thats how you can convert your static Navbar into a Sticky Scrollable Navigation bar.If you feel any trouble feel free I would love to help you.This is the first ever Scrollable Navigation Release over Blogger.So there are still room for improvement and from coming post surly more improved and optimized Scrollable Sticky bars would be shared till you get it done till then peace blessing happy 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!

10 comments

June 25, 2012 at 10:59 AM

Hello! Thank you so much for posting this!
It is very helpful!
The tut is very easy to follow until I have to search for the nav bar. I can't find it..
Please help!

Candace
Please email me candacewu.x3@gmail.com

Editorial Team MOD
June 25, 2012 at 11:01 AM

@Candace Wu
Please Give your Blogger Template and we will be more then happy to help you. Peace and Blessings

October 13, 2012 at 2:35 PM

Hi Just wondering how to work on this on wordpress?

Editorial Team MOD
October 13, 2012 at 11:28 PM

Well, I Think This is a Simple HTML, JavaScript and CSS. I Guess it can easily work in WordPress if you apply it into the Dynamic Coding of WP. Peace

February 1, 2013 at 3:20 AM

Hallo Syed. I want to make it in one of my blogger widget, like your "socialize it" widget. Can you help me?

Editorial Team MOD
February 1, 2013 at 3:57 AM

We will Soon write a Tutorial on it :)

February 1, 2013 at 6:05 AM

Thank for you! I'll waiting for this, hope you write it as soon as possible ;D

June 8, 2013 at 2:35 PM

I was just trying to make my Navbar sticky and scrollable using this tutorial, but I had a problem! It turns out that when I scroll down, the navbar stays on top of the page, but under the posts... So you won't be able to see it at all at some points... How can I solve this problem?

July 25, 2013 at 9:25 AM

You can add z-index:100 to show navbar on top of the page and posts

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

DNS
March 8, 2018 at 7:52 AM

It's not working bro?can you tell what is problem? my website www.mbaminiprojects.com

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.