Friday, 27 March 2015

Create a Sticky navigation bar in Blogger

Unknown 11:05 , , , , 4 comments :


Change Any normal Navigation bar to a Sticky Navigation Bar with this guide.

What is the benefits of this?
Your website or blog visitors doesn't have to scroll back to the top to select different topic or category.

Tutorial 1:
This tutorial helps to make your navigation bar appear at the top of your blog on load and fixed to the top of the browser window while the user is scrolling.

NOTE:This tutorial is for those who doesn't have navigation bar below header.

 1.First of all login to your blog and go into Template>Edit Template

2.You’ll need to wrap it in a div with the id navigationbar like s
(if your navigation bar has search box and social media icons the add their code also in it)

<div id="navigationbar">

... /Your Navigation bar html goes here/ ...

</div>
 
3. Go to Template > Edit HTML and search for ]]> </b:skin> and just above ]]> </b:skin> add the following code – 
 
/* START thegeekystuff and hackersofhell FIXED NAV BAR */
#navigationbar { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}
/* END thegeekystuff and hackersofhell FIXED NAV BAR */

Tutorial 2:(recommended)


If your navigation bar is under your header and you want it to stick to the top of the window when user scroll past it then follow this tutorial is for you.

 1. Go to Template > Customise > Advanced > Add CSS and add the following code. When you add CSS to the Template Designer on Blogger, it automatically gets placed before ]]></b:skin> in your template.
/* START thegeekystuff and Hackersofhell STICKY NAV BAR */
sticknav {
background: #ffffff;
height: 30px;
width: 100%;
margin-right: 0px;
margin-left: 0px;
left: 0px;
right: 0px;
position: relative;
z-index: 9999;
}
.fixed { position:fixed;}
/* END thegeekystuff and Hackersofhell STICKY NAV BAR */
2.Now go into Template>Edit html and find the navigation bar code of your template.After finding,Paste <sticknav> before it and </sticknav> after the whole navigation bar html code.
(if your navigation bar has search box and social media icons the add their code also in it) 
<sticknav> 

.../Your template navigation code goes here/....

</sticknav>

4. The final step is to add a script to tell the bar to scroll. For this go to Layout > Add Gadget > HTML/Javascript Gadget and paste the following. 
<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() {
    

var aboveHeight = $('header').outerHeight();

$(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
        } else {
       $('sticknav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});
</script>
5.Save it and see variation into your blog

        Sharing is Sexy! Share this post!

4 comments :

  1. Azad13 February 2019 at 04:02

    This comment has been removed by the author.

    ReplyDelete
  2. Azad13 February 2019 at 04:05

    this method worked for my blogger site... https://www.logicaltube24.com

    ReplyDelete
  3. Admin24 May 2019 at 04:19

    It worked thanks!

    ReplyDelete
  4. Andi Croft8 March 2021 at 03:54

    Hi, Thanks for the code and it worked very nice for my blog https://www.tekfiz.com. But one thing it is lacking. Is it possible to keep the logo by the left side of the "Sticky Menu" bar? I was looking for a tweak but unable to fix it. Could you please provide a code to make the logo appear on the left of the sticky menu bar which will make it even better?

    Also I can see your blog also having the same floating sticky menu bar without logo. Let me know if this can be fixed.

    ReplyDelete

Subscribe to: Post Comments ( Atom )