How To Add A Fixed Header To Blogger Blog

Create a sticky or fixed navigation when scrolling on Blogger - create sticky header on blogger-Many popular sites lately are starting to add a tough and fast or sticky navigation to help visitors find their way around the site. It means the reader doesn't need to scroll back to the highest of the page to settle on a special page or topic. Instead they need access to the most navigation in the least times.

A fixed navigation is placed at the very top of the page and remains there when scrolling down. A sticky navigation is typically placed beneath the header, once the visitors starts to scroll down the navigation will become fixed once it "hits" the highest of the browser window.

TUTORIAL 1 – Custom Fixed Navigation Bar

To make your navigation bar appear at the highest of your blog on load and glued to the highest of the browser window while the user is scrolling.

1. Firstly, you'll got to found out your navigation. Here may be a tutorial showing you ways to make and elegance a basic navigation bar. I even have plenty of other navigation bar tutorials here.

2. If you have already got a custom navigation menu found out you'll got to wrap it during a div with the id navigationbar like so

<div id = "navigationbar" >

... Navigation goes here ...

</div>

3. Go to Template > Edit HTML and above ]]> </ b : skin > add the following code –

                              /* START HUNTERHACKS FIXED NAV BAR */

                              #navigationbar { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}

                              /* END HUNTERHACKS FIXED NAV BAR */

4. To remove Blogger admin navbar,

go to Layout > NavBar and turn it off. You'll be left with a blank space. To remove this gap go to Template > Edit HTML and above ]]> </ b : skin > add the following

                                                                                body                                                            .                                            navbar                                                            {                                                              height                                            :                                                                                                        0px                                            ;                                                                                                        }

TUTORIAL 2 – Sticky Navigation Bar

If your navigation bar is under your header and you would like it to stay to the highest of the window once you scroll past it then follow this tutorial.

1. Go to Template > Customise > Advanced > Add CSS and add the following code. When you add CSS to the Template Designer on Blogger, it gets placed before ]]></ b : skin > in your template. Change thecoloured code to suit your blog layout. Click Apply To Blog.

                                  /* START HUNTERHACKS STICKY NAV BAR */

                                  sticknav                                                                    {

                                  background                                                  :                                                                                                                      #ffffff;

                                  height                                                  :                                                                                                                      30px                                                  ;

                                  width                                                  :                                                                                                                      100                                                  %;

                                  margin                                                  -                                                  right                                                  :                                                                                                                      auto                                                  ;

                                  margin                                                  -                                                  left                                                  :                                                                                                                      auto                                                  ;

                                  left                                                  :                                                                                                                      0px                                                  ;

                                  right                                                  :                                                                                                                      0px                                                  ;

                                  position                                                  :                                                                      relative                                                  ;

                                  z                                                  -                                                  index                                                  :                                                                                                                      9999                                                  ;

                                  .                                                  fixed                                                                                                                      {                                                                      position                                                  :                                                  fixed                                                  ;}

                                  /* END HUNTERHACKS STICKY NAV BAR */

2. Next, you'll got to found out your navigation. Here may be a tutorial showing you ways to make and elegance a basic navigation bar.

3. Find the code for your navigation code – this is could be in your template or in a gadget. Paste <sticknav> before it and </sticknav> after it.

                                  <sticknav>

                                  (code for navigation)

                                  </sticknav>

4. The final step is to add a script to tell the bar to scroll. To do 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. The script presumes that your header is named header . If the navigation is jumping replace

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

with the following, adjust the value for the height your header is

                                                                                var                                                              aboveHeight                                                            =                                                                                                        300                                            ;

TUTORIAL 3 – Fixed Pages Gadget

If you're using Bloggers Pages gadget, you can simply add the following code to make it fixed to the top of the browser window. Go to Template > Edit HTML and add this code above ]]> </ b : skin >

                                          #PageList1 { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}

The selector you use (#PageList1, #PageList2, .pagelist, etc) will depend on your template and how many PageList gadgets you've added.

How to Centre & Style the Navigation

To centre your navigation, add the following code above </b:skin> to Template > Edit HTML. For more styling code check outthis basic navigation tutorial. create a sticky header when scrolling

                          /* Centre Navigation */

                          .                                      tabs                                                    .                                      widget li                                      ,                                                                                          .                                      tabs                                                    .                                      widget li                                      {                                                      display                                      :                                                                                          inline                                      ;                                                                                          float                                      :                                                      none                                      ;}

Some templates may need this instead

                          /* Centre Navigation */

                          .                                      tabs                                                    .                                      widget li                                      ,                                                                                          .                                      tabs                                                    .                                      widget li                                      {                                                      display                                      :                                                                                          inline                                      -                                      block                                      ;                                                                                          float                                      :                                                      none                                      ;}

or this

                          /* Centre Navigation */

                          .                                      tabs                                      -                                      inner                                                    .                                      widget ul                                                    {                                                      text                                      -                                      align                                      :                                                      center                                      ;}                                                                                          .                                      tabs                                                    .                                      widget li                                      ,                                                                                          .                                      tabs                                                    .                                      widget li                                                    {                                      display                                      :                                                                                          inline                                      -                                      block                                      ;                                                                                          float                                      :                                                      none                                      ;}

Gap above navigation

To remove Blogger navigation bar, go to Layout > NavBar and turn it off. You'll be left with a blank space. To remove this gap go to Template > Edit HTML and above ]]> </ b : skin > add the following

                                                                                body                                                            .                                            navbar                                                            {                                                              height                                            :                                                                                                        0px                                            ;                                                                                                        }                                                                                                        .                                            content                                            -                                            inner                                                            {                                                              padding                                            -                                            top                                            :                                                                                                        0px                                            ;                                                                                                        }

Elements losing styling/CSS when moved above header

Occasionally, putting certain elements above the header will remove the CSS related to it. Here's an answer thereto . within the layout tab drag your header, navigation and the other gadgets down a touch . it'll jump to the second level, this shouldn't affect the design of your blog (as in it'll still appear at the top) but it'll keep the styling. This image will hopefully explain that better.