Non-Floating Header in Blogger Dynamic View

Floating Header

Non-Floating Header

Last week, blog reader boboq88 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 KY_Metro. 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.

#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;
}
#header #views{
position: absolute;
}
#header #pages{
left: 110px
}