Here's how you will make your blogspot (former blogger) Header fixed so all of your Blog contect will scroll under the Header (exactly like you can see it here).
Do a backup of your Template first then Login to your Blog-account and go to Design >> EDIT HTML (checkmark expand Widgets)
and then Search for: .header-outer {
when found add this:
overflow:hidden;
position:fixed;
z-index:999999;
width: 1440px;
That's it :) Please leave a comment ;)
Thanks man! I searched a lot until I found this! THANKS!!!!
ReplyDeleteYou are welcome dude :)
DeleteThis is working great except for the fact that my content is starting at the very top of the page - underneath the header image.... is there a way around this?
ReplyDeleteThere is a way but that would need some investigation before I can provide you a solution. Post the URL of your blog and I'll take a look
Deletecheers
force
Can you post a screenshot...I'm not sure if I exactly understood your issue
ReplyDeletecheers
It works, and it is simple. Great. Thanks.
ReplyDeleteI have the same problem mentioned above. Part of the page is not seen, since my header is thicker than the example one. Can you make the header thicker. Just the same thing I see here as blgspot fixed header, but establishing how thick it is, how many rows. Yours is three rows, lets say, mine should be 10 or so.
Hi Gregario! I hope I understood it properly and the solution below works for you:
ReplyDeleteGo to EDIT HTML and search for .header-inner .section
.header-inner .section {margin: 1001px 1001px;}
Replace 1001px in the line above with your own values..that should do the trick ;)
Hi I could not find header outer in my html. I can find header inner. Any ideas? sassytsews.blogspot.com I have a thicker header by the way.
ReplyDeletestrange. Have you edited your html? If you want I can send you my
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteI done control and F to find. Even tried just searching for header so the system would find every occurrence. I will have another try and search for outer; can't remember whether I did that or not. By the way you didn't finish your sentence. Thanks for being so prompt too.
ReplyDeleteSearched for outer and it only comes up in relation to date, post date outer etc. I could email the code to you if you want.
ReplyDeleteyep...send me the code please
ReplyDeleteBTW...have you done this:"EDIT HTML >>checkmark expand Widgets<--- Have you expanded the Widgets?
ReplyDeleteYeah I expanded the widgets and done ctrl and F. I tried to post some code on this page but it wouldn't let me moaned about "div" which is in the code.
ReplyDeletecan you try this:
ReplyDelete1) backup your html file
2) try another template
3) search for .header-outer {
4) let me know about the outcome
Hi. I don't want to change my template to be honest, only want to use the one I have. Thanks for trying to help though.
ReplyDeleteDoesn't seem to work for me. Nothing happens. I This is what my code looks like
ReplyDelete.header-outer { overflow:hidden; position:fixed; z-index:999999; width: 1440px;
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
I also tried it this way:
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
overflow:hidden;
position:fixed;
z-index:999999;
width: 1440px; }
my blog (is adult btw) http://matureframes.blogspot.com/p/home.html
have you followed these Steps:
ReplyDeleteDo a backup of your Template first then Login to your Blog-account and go to Design >> EDIT HTML (checkmark expand Widgets) and then Search for: .header-outer {
It's important that you put the code in the right place. TBH I don't see anything wrong in what you wrote in your post. Unfortunately I can't check your page because I am at work right now
OH MY LORD I LOVE YOU IT WORKED PERFECTLY
ReplyDeleteGlad it worked :) I spent some time to make it work ;)
ReplyDeleteCheers
http://fullsoftbd.blogspot.com
ReplyDeleteSeriously had looked for this fix for the last hour. Thank you so much! Worked perfectly for my .tabs-outer (nav bar) too!
ReplyDeleteYou said to move the starting point of the content down so it doesn't start behind the header to do this:
ReplyDeleteGo to EDIT HTML and search for .header-inner .section
.header-inner .section {margin: 1001px 1001px;}
Replace 1001px in the line above with your own values..that should do the trick ;)
I have tried this by changing .header-inner .section {margin: 1001px 1001px;} to like 3001px or 8001px, but it doesn't make a difference. I'm not a code person so I'm not sure what I'm supposed to change it to to make the content start lower on the page. Help? Thank you!
THANKS HAVE A VISIT WWW.SYSTRICK.TK
ReplyDeleteHello, I can't find an option to expand widgets?
ReplyDeleteH. Ren: Go to "Template" then "Edit HTML".
ReplyDeleteAround line #16 click on the arrow and this will show all the CSS.
Around line #246 you will see the ".header-outer".
Always a good thing to backup your template before making changes. Adjust "width" to width of your blog.
Great header. Simple and effective.
Thanks
ReplyDeleteThanks For This Great Tutorial :)
ReplyDeleteTop 10 Fixed Header Blogger Templates
Thank you so much for this tutorial!!!
ReplyDeleteVery Nice Work Tell About fixed footer
ReplyDeletewow, good, but I still confuse.
ReplyDeletevisit back please.
ilmudes.blogspot.com