How to Create a Fixed Sidebar on Tumblr

Written by shawn mcclain
  • Share
  • Tweet
  • Share
  • Email

The sidebar on your Tumblr blog sits on either the right or left side of the page and generally contains information and links that visitors to your blog will find useful. On many themes, the sidebar is positioned relative to the body of the blog, which means that when you scroll down, the sidebar scrolls off of the page. If you want to make it so that the sidebar remains fixed on the screen no matter how far down you scroll, you'll need to edit the HTML code for your blog.

Skill level:


  1. 1

    Visit the Tumblr "Log In" page, which you can find at Enter your e-mail address and password for the account you want to edit.

  2. 2

    Click the name of the Tumblr blog at the top of your dashboard. Then click "Customize Appearance" on the right side of the screen.

  3. 3

    Click "Theme" at the top of the page. At the bottom of the small drop-down window that opens, click "Use Custom HTML." The theme thumbnails will disappear and be replaced by a long list of HTML code.

  4. 4

    Press "CTRL" and "F" to open up a search box. Type in "sidebar" and the first "sidebar" word will be highlighted in the HTML code. Most themes will label the sidebar code under "/sidebar/" or something similar. If your code does not, look for "#sidebar {" or "#right-column {", followed by a few lines labelled "float," "width" and "colour."

  5. 5

    Find the line called "position:" just under the sidebar heading. Change the word after "position:" to "fixed." If you do not see a position line, select the end of the any line just under the header, but before the close bracket, "}", press "Enter" and type in "position: fixed;". Click "Save" at the top of the screen to save your changes. Your sidebar will now be fixed in position when you scroll down the page.

Tips and warnings

  • Once you fix your sidebar in position, it may initially jump to one side of the page, since it is no longer attached to the side of the main posting area. Add a piece of HTML code that reads "right: 300px;" or "left: 300px;" directly under the "position: fixed;" line that you created. Click "Save" to see how the sidebar will look, and then go back and change the "300" to a different number until the sidebar looks good on your blog.

Don't Miss


  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.