Friday, November 2, 2012

Non-Floating Header in Blogger Dynamic View

Floating Header
Non-Floating Header

Last week, blog reader asked if there is a way to make headers in Dynamic View to sit at one place, instead of floating around your screen. It took me 3 hours to come up with a fix then. Today I received a similar question from blog reader. So here's the fix, to discipline your header and make it sit at one place, instead of floating all around the place.

UPDATE: This tweak will not work on static pages... 

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#header .header-bar, #header .header-drawer.sticky, #header .header-drawer{
top: 0px !important;
margin-top: 0px !important;
position: relative !important;
}
body.sidebar #main.hfeed #sidebar{
position: absolute !important;
}
body.sidebar #main.hfeed #sidebar .item{
background: #EEEEEE;
}
#header{
position: relative !important;
}
You might also like:



No comments:

Post a Comment