Quick Guide: How to Fix Position of Tumblr Header

Styling and customizing is the most important work done on any website as it the only tool to attract more visitors to respective website. Stylizing header is often comes at first place because it contains navigational area, your company logo or everything that you have considered important. Fixing the actual position of header while the visitors go on glancing your website, makes your website look more professional and managed. You can complete this professional change using HTML/CSS - Cascade Style Sheets - for your header. Basically, you do this by 'position' tag to set the position of an element on the page. So, when you add 'fixed;' value to 'position:' tag then, you are actually fixing the position of that element in which this tag is placed. We are going to do this for Tumblr Header element. 

Guidelines

1. Log into your Tumblr account and navigate to Customizing Page of tumblr. (Optional Part: Log in to specific blog account too if you have set any password for it.)
2. Locate Custom Theme option and click "Edit HTML" next to it.
3. Open Finding Tool by pressing Ctrl+F within coding text.
4. Search header element by entering '#header' in the search box and press OK button. You can repeat your search with '#header {' text within HTML code of your custom theme.
5. Important Step: Below #header { , enter 'position: fixed;' - without '.
6. Preview your changes by clicking 'Update Preview' button placed at right side of customizing area.
7. Finally, click the 'Save' button to make header fixed permanently on your tumblr blog.

Tips on Fixing Blog Header

• When you set the position fixed for header then, the content below header will start overlapping with header. To make your header and content separate from each other, set the margin tags either for header or for the content below it. 

For example: If you setting margins for header then, add 'margin-bottom: 10px;' in #header CSS Or if you are setting margin tags for the content then, add 'margin-top:10px;' (without ') in the CSS of content area. 

• If you have messed with your custom theme and got unwanted results then, use 'Recover Custom Theme' option to restore your theme defaults.