How to Keep the Header in Place on Tumblr
By Naomi Bolton
The header of your Tumblr blog offers a good opportunity to promote your brand or logo, but it's no longer visible after visitors start scrolling through your posts. To keep the header in place so that it remains visible even while visitors are scrolling down you need to edit the HTML code of your Tumblr theme. Tumblr gives you access to the source code of your selected theme and you can preview the results before saving any changes.
Sign in to your Tumblr account and access the "Settings" page from your dashboard.
Select your Tumblr blog from the list on the left and then click "Customize" to access the customization screen.
Click "Edit HTML" to access the integrated Tumblr theme code editor.
Scroll through the code and locate the section that defines your blog header. The section differs depending on the theme that you are using. For example, themes such as Rubber Cement and Plaid that uses your blog title as a text header uses the "H1" tag to define the header section. Themes that allow you to upload an image header, such Redux, use the "#wrapper #title" tag.
Add a new line to the header code section and type "position: fixed;" (without the quotation marks) to specify that the header must remain fixed in place when the rest of the page scrolls.
Add another line below the newly added code and type "z-index: 100;" (without the quotation marks) to specify that the header must always remain the top most layer. The "z-index" value prevents other page elements such as images or videos from overlapping the header when visitors scroll down the page.
Click the "Update Preview" button and use the mouse scroll wheel or browser scroll bars to scroll down your Tumblr blog. Check that the header remains fixed in place.
Click the "Save" button to save the changes that you have made to the theme code.
Tips
Changing the code to keep the header in place can cause the header to overlap the post content and sidebar on some themes. Add the line "margin-top:300px;" (where the numerical value is the height of your header) to the post and sidebar sections of the code to keep the header above other page content.
References
Writer Bio
Virtually growing up in a computer repair shop, Naomi Bolton has held a passion for as long as she can remember. After earning a diploma through a four year course in graphic design from Cibap College, Bolton launched her own photography business. Her work has been featured on Blinklist, Gameramble and many others.