Sticky Header Bar in Blogger Dynamic View

Before

After

Here's another quick one. When you start to scroll in Blogger's Dynamic View, your header bar will automatically hide itself and will only re-appear when you point to it. Here's how you can force it to stay visible all the time.

Go to Dashboard --> 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

#header .header-drawer.sticky{ margin-top: 0px !important; position: fixed !important; top: 65px !important; -moz-transition: top 0.0s linear 0.0s !important; -webkit-transition: top 0.0s linear 0.0s !important; -ms-transition: top 0.0s linear 0.0s !important; -o-transition: top 0.0s linear 0.0s !important; }

If you've added a custom header from my 'Dynamic Views Header' tutorial, you need to adjust Line 4 from the code above to fit with the height of your header. You can find this value by tracking back the code for your custom header, and look for the last value in the code (next to the 'height' attribute).

Happy Easter everyone :)

You might also like:

Force Gadgets to Stay Visible in Blogger Dynamic View

Before

After

Second post of the week! Your Dynamic Views gadgets would hide itself by default after a few seconds upon loading. It'd reappear when you bring your mouse over it. If you find this annoying, here's how you can force it to stay unhidden and remain visible at all times.

Go to Dashboard --> 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

#gadget-dock{ position: fixed !important; right: 0px !important; }

Extra:

If you've used one of my other tweaks to reposition your gadget from the right to the left, use the following code instead to keep your gadgets visible.

?

1 2 3 4

#gadget-dock{ position: fixed !important; left: 0px !important; }

Cheers!

You might also like: