Fixed Header for Blogger. ~ The Blog Doctor.
Loading...

Fixed Header for Blogger.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

The standard blog has the header which scrolls upward along with the content and soon disappears from view. It is a rare connoisseur's blog which has a fixed header with the content scrolling upwards into it. This effect has the header always remaining in view thus imprinting itself in the viewer's memory........

As an example I have hacked the new layouts of Blogger to reproduce this effect as can be seen here. See the screenshots below in which the header remains fixed in its place as the content magically scrolls into it and disappears.







To achieve this effect you have to change or modify the following code in your new Blogger template/layout. Go to Template------>Edit Html and first backup your template. Then scroll down in the css section and add this code :

@media screen{
body>div#header{
position: fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}

after this line

<b:skin><![CDATA[

Also add this line :

position:absolute;

in your header css (#header).

Save Template.


Now we have to position the header outside the outer-wrapper so that the content can flow into it. To do this scroll down into the body area of the template code and locate this code in the header section. Cut out this code and paste it just below the <body> tag.


<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Image1' locked='false' title='' type='Image'/>
</b:section>


Next delete the following header-wrapper code :


<div id='header-wrapper'>
</div>


Save Template.


IMPORTANT


You may have a header-wrapper defined in your css. Then apply all the above settings to header-wrapper instead of header.

Technorati Tags:, , , , , ,

31 comments:

nicolle said...

Thank you for all of your useful posts!
I'm looking to make the image in my header not fixed so that the words scroll up into it, but I want the image to be viewed the same no matter what the screen size. Right now, my header fills my entire screen, but my sister told me that on her computer there's some white space. How can this be fixed? Thank you so much!

Vin said...

Nicolle,

Whether the picture fills the whole width of the screen depends on :

1. Size of picture.

2. Monitor resolution.

Your sister probably has the wider resolution set in the Display Properties---->Settings tab---->Lower left corner of her PC.

Anonymous said...

Hello Vin,
could u give me source this template (Fix Header)
Thank's

Vin said...

Anonymous,

There is no template. Just modify the header code as shown in the post above.

sarah-bug said...

Hi Vin, You instructions are perfect! Thanks! I was wondering if there's any way to include the Blogger Navbar with my header so that there isn't a space above the header when the page scrolls?

Vin said...

Sarah-bug,

What is the blog address?

Claudia's Corner said...

Yes Vin I would also like to be able to eliminate that space in between is there a way to do it, also I was wondering if I could get some help I did everything like it said in the post and it worked well but the header doesn't stay centered, so i fiddled around with some px numbers and stuff, I don't now much about this stuff just experimenting, anyway I got it so it looks fine on my computer but on other's it doesn't stay centered it goes off the screen could you please help me . oh and thanks for this blog it's great!

Vin said...

Claudia's Corner,

What is the blog address?

Claudia's Corner said...

http://claudia916.blogspot.com
here is the blog thank for your help.

Vin said...

Claudia's Corner,

Change this code :

#header {
margin: 0px 610px auto;
border: 0;
text-align: auto;
color:#FFBBE8;
}

TO THIS CODE :

#header {
margin: 0px auto;
border: 0;
text-align: auto;
color:#FFBBE8;
}

Claudia's Corner said...

ok I did but it moves it to the left and it doesn't stay centered

Vin said...

Claudia's Corner,

Can you send me the template? My email address is in the middle column.

sarah-bug said...

mystlcardinalsblog.blogspot.com
Thanks!

Vin said...

sarah-bug,

In your Template code box scroll down to this code :

#navbar-iframe { display:block;}

CHANGE ABOVE CODE TO :

#navbar-iframe { display:block;
position: fixed; }

Preview and save.

sarah-bug said...

Well, I didn't have the navbar code, but I threw it in there and now the navbar is gone. That works for me, though!
Thanks!

Fred said...

Is it possible to have only the main column (post) to scroll? I want the sidebar to stay still. Thanks for your help!

Vin said...

Fred,

It is possible to have a fixed sidebar but not recommended since only a limited number of gadgets can be added to it.

If you add more they won't be seen since the sidebar will not scroll up!

Kate said...

hi, vin!

i applied all the codes you provided in this topic, i followed everything but my header isn't centered. it went to the left and the frame i put around it disappeared...

btw, i got the code for the frame from one of your entries, too! worked great!

please help me fix it... thanks a lot!

Vin said...

Kate,

At the moment I don't see any picture in the header!

Laurel said...

is there a way to fix the footer? or is that too difficult because of differing screen sizes / resolutions?

i'm working with kylepatrickjohnson.blogspot.com at the moment...

insolemn said...

Hi,

Thanks for posting this code unfortunately, I can't get it working. I am using the standard TicTac template, which has a header-wrapper, and I inserted the 1st part of your code in the CSS section. - it saved OK.

Then, I modified the code in the
div id='header-wrapper' and saved the code. Nothing changed so far and the page looks as it always does. Then, I added
position: absolute; in the #header-wrapper CSS and the header became half the width of normal, and it still scrolls with the posts.

What am I doing wrong?

Vin said...

insolemn,

When you edit the code in the template and save it the page will reload with the saved changes. If it does not it means the changes were not saved and you have to do it again.

P.S. Do all experiments on a test blog first. Then when successful repeat on main blog.

insolemn said...

Hi Vin,

Thanks for your advice about a test web page, which I promptly created. I selected the same template and made all the changes according to your instructions and ended up with the same results. The blog is:

http://pious-impiety.blogspot.com/

I am lost. Is it permitted to paste here the relevant code I edited?

Any help is greatly appreciated.

insolemn

Vin said...

insolemn,

You can send me the code by email.

Anonymous said...

is it possible to add the same effect on sidebar?
...where the main/post column is moving and tje sidebar is static -locked?
many thanks!

/// said...

is it possible to add the same effect on sidebar?
...where the main/post column is moving and the sidebar is static -locked?
many thanks!

Vin said...

///,

It is possible but it gives you a very small sidebar whereas now days you need a taller sidebar to add all the gadgets and advertisements.

DynaDASH said...

Hi, I' sorry to post in a time like this... but ¿it is possible to put a... not the same effect, but a similar one when a window is not maxed out? Let me explain... this is my blog: http://wardenclyffe-tower.blogspot.com/
When the window is not maxed out, the sidebar moves over the background, and that's not what I want, I want the sidebar to be where it is (the same for the body), but I want to be able to scroll down. I don't know if I explained myself very well.

Anyway, sorry for any disturbance and thank you for your time and patience.

Anatoly said...

Hi Vin,

Is it possible to center the header???

I try the code above and it works fine, but i need to center the header, but it doesnt work for me.

Maybe because of position:fixed, so when i change it for example to absolute, then the header is centered, but it doesnt fixed anymore??? :(

If yes can you post the code for it?

Thank you very much...

Anatoly said...

Is it possible to center the header???

I try the code above and it works fine, but i need to center the header, but it doesnt work for me.

Maybe because of position:fixed, so when i change it for example to absolute, then the header is centered, but it doesnt fixed anymore??? :(

If yes can you post the code for it?

Thank you very much...

Stray said...

Wonderful! I have been really struggling with this, not on a blogger site, but on a client website I'm designing that includes a blog element. So many complicated solutions, and simple CSS was exactly what I was looking for. Worked perfectly! Thank you!

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.