How to add a floating header and floating menu bar for blogger?

By adding a floating Header and floating menu bar into your blogger blog, you can get a lot of benefits.

Like you, I am also starting my blog site ( www.takitakibiz.com) as a hobby. Yes, most Bloggers start a blog site as a hobby. Also, most people interest to start a blog site for making friends, online store sales and make money. Whatever reason we started or would like to start a blog site.  With time we try to improve our blog’s traffic, appearance, and content. If you want to get more traffic for your blog site, you need to attract more readers for your web or blog site. In that point as well as the content in your blog, the appearance or layout of your blog or web site has also done a great job.

So as a blogger we try our best to make our blog sites more professional and attractive than others. So we like to add more functionality to our blog site. Because of that reason most the bloggers would like to use the customized or third-party template for their blogs more than the classic or default templates. Also, some bloggers interested to use their own build blog template.  However, by using some HTML and CSS codes we can be doing some customization and modifications for our blog layout.  For that not required professional knowledge about HTML or CSS coding. We can be doing modifications or customization to both default blogger template and customized templates.


In that point most of the bloggers interested to add some modifications like, add a floating/fixed header, add floating/fixed menu bar, add floating banners and add floating notification bar. By adding additional HTML and CSS codes and java scripts you can do that customization without any issue to the blog site layout. Floating an object is done by fixing its position using a JavaScript code. However, we need to define which parts of the blog page you need to float, OK. Then let discuss two modifications.

1.           How to add the floating/fixed header for blogger?

2.           How to add a floating menu bar for blogger?

How to add a floating header for blogger?

The Floating/Fixed header is one of the best ways to add Professional looking for your blog. What is this floating header? In the floating header, the header portion remains fixed on its place while you scroll up or down in the page. With applying that method while you scroll down or up in your blog page, the header will be remaining fixed position on the top of the page. You can apply that method by using 2 methods.

DEMO

Method 01

Step 01.  Go to your Blogger account

Step 02.  Select your blogger blog and go to your Blogger Dashboard  

Step 03.  Go to the template and take a backup of your template.

Step 04.  Now click on “Edit HTML“button.

Step 05.  Search for #header or .header or something like this that defines the header portion of your blogger template. You can easily find this by clicking Ctrl+F and type #header or. Header.

Step  06. Now Add below CSS code to the header section of the style sheet

                    position:fixed; z-index:200; background-color: #fff;

                That code will help to make the header portion to stick at the top of the blog and any other content of your blog.

Step 07.  Also, we have to make some changes in the #main portion to prevent the posts from being positioned underneath the header. To do that search for ( Ctrl+F)  #main or the portion that defines the main portion of the blog and add the below code to style sheet.

                                              margin-top:200px;

Step 08. Finally, save the template and go to your blog site and scroll down to check is that floating header work or not?

Method 02

Step 01.  Go to your Blogger account

Step 02.  Select your blogger blog and go to your Blogger Dashboard  

Step 03.  Go to the template and take a backup of your template.

Step 04.  Now click on “Edit HTML“button.

Step 05.  Copy and Paste below codes to your Style sheet and save your template

<style type="text/css">

.fixed-header{

 overflow: hidden;

 position: fixed;

 z-index: 999999;

 top: 0px;

 left: 0px;

 right: 0px;

 border: 2px solid black;

 height: <span style="color: red;">76</span>px;

 background: <span style="color: red;">#EEE</span>;

}</style>

Step 06.  After save template Go to Blogger Dashboard

Step 07.  Go to the Layout tab

Step 08.  Then Click on Add a Gadgetand select “HTML/JavaScript” Gadget.

Step 09.  Now Copy the below code and Paste it in “HTML/JavaScript” Gadget

<div class="fixed-header" >

<center><h1>Type Your Blog Header Here</h1></center>

</div>

Step 10.  Now click on the save button and go to your blog site and view the floating header work or not.

If you need to add Image behalf of the text adds below code into step 09.

<div class="fixed-header" >

<center><img src="Your Header image URL Here" /></center>

</div>

OK, It’s about How to a add floating header for blogger.

How to Add a floating menu bar for blogger?

DEMO

Floating/Fixed menu or navigation bar is another one of the best ways to add Professional looking for your blog. What is this floating Menu bar? In floating Menu bar, the Menu bar portion remains fixed on its place while you scroll up or down in the page. With applying that method while you scroll down or up in your blog page, the menu/navigation bar will be remaining fixed position on the top of the page.

Lots of blog and web sites, we can see their menu/Navigation bar starts floating on top while scrolling. After you apply that method, your current blogger menu bar or navigation bar became remaining fixed position on the top of the page while you scroll down or up in the blogger page. OK, without wasting time let discuss,

Add floating Menu bar for blogger.

*First you need to add a menu bar for your blogger.

You can add a custom menu bar easily by using our previous post or following the below steps. 

Step 01. Log into your Blogger site.

Step 02. Go to Dashboard

Step 03.  Go to the Layout tab

Step 04.  Then Click on Add a Gadgetand select “HTML/JavaScript” Gadget.

<div id="nav">

              <ul>

                        <li><a href='#'><b>Home</b></a></li>

                        <li><a href='#'><b>Menu01</b></a></li>

                        <li><a href='#'><b>Menu02</b></a></li>

                        <li><a href='#'><b>About</b></a></li>

              </ul>

</div>

                                             Replace your URLs with #.

Step 05. Click on the save button.

The menu is OK. Then we need to float menu bar. For this, we need to add a JavaScript code between the <Head> tags. For that follow the below steps.

Step 06.  Go to your Blogger Dashboard  

Step 07.  Now click on “Edit HTML“button.

Step 08.  Search for the <head>tag (Click on Ctrl+F and search)

Step 09.  Paste the following code between <head> </head> tags.

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<script type='text/javascript'>

//<![CDATA[

$(function() {

    // Stick the #nav to the top of the window

    var nav = $('#nav');

    var navHomeY = nav.offset().top;

    var isFixed = false;

    var $w = $(window);

    $w.scroll(function() {

        var scrollTop = $w.scrollTop();

        var shouldBeFixed = scrollTop > navHomeY;

        if (shouldBeFixed && !isFixed) {

            nav.css({

                position: 'fixed',

                top: 0,

                left: nav.offset().left,

                width: nav.width()

            });

            isFixed = true;

        }

        else if (!shouldBeFixed && isFixed)

        {

            nav.css({

                position: 'static'

            });

            isFixed = false;

        }

    });

});

//]]>

</script>

Step 10. It’s not 100% completed yet. Still, there might be an issue. Still, we didn’t give any z-index value in the CSS code for the “nav”, So menu bar night goes behind the blog post. So Search for the following code in style sheet (By clicking Ctrl+F)

]]></b:skin>

Step 11.  Place the following code above it.

#nav{ z-index: 999; }

Step 12. Click on the Save button and view your blog, if floating menu bar working or not?

I Hope the above methods help you to add a floating header and floating menu bar for blogger. And if you have any problem or know more fixes on the floating header and floating menu bar for blogger, Please share with us in the comments section below. Happy Blogging.