How to Create a Fixed Sidebar on Tumblr


Many Tumblr themes provide you with options to adjust your sidebar using the Edit Theme sidebar. If your theme doesn't include these options, you can edit the HTML code to configure a fixed sidebar. After you locate the sidebar code for your theme, edit the position attribute to specify how your sidebar responds when you scroll down the page. Use caution when editing your theme's code as changes can negatively affect its layout and overall appearance.

  • Log in to the Tumblr website. If you have more than one blog, click the arrow next to your blog's name on the top of the right sidebar and then select the blog you want to customize.

  • Click "Customize" on the right sidebar. Many themes populate the left sidebar, labeled Edit Theme, with appearance and theme options to help you customize the layout of your theme.

  • Scroll down the left sidebar and look for an option that mentions "sidebar." For example, scroll down to the Theme Options group and look for "sidebar," "fixed sidebar" or "layout." If available, select the option to enable a fixed sidebar. For example, toggle the slider next to "fixed sidebar" or select "fixed" under Layout. Your current theme may not support any options to customize your sidebar without editing its code.

  • Click the "Edit HTML" link under your theme's name at the top of the left sidebar. The Edit HTML sidebar expands and contains all the code for your current theme.

  • Press "Ctrl-F" to open the Search For and Replace With fields. Enter "sidebar" into the Search For field. The snippet of code referencing your theme's sidebar will be selected.

  • Edit the position attribute. Locate the code that reads "position" under the sidebar. For example, the code may read "position: absolute" or "position=relative." Replace the word after position with "fixed" -- without the surrounding quotes.

  • Click the "Update Preview" button at the top of the Edit HTML sidebar. Preview your changes in the page to the right of the Edit HTML sidebar. Make sure everything looks correct before continuing.

  • Click the "Save" button at the top of the Edit HTML sidebar. Your changes are immediately published and available by visiting your blog's URL.

Tips & Warnings

  • If you can't find the position attribute under the portion of your theme's code that reads "sidebar," you can manually create the attribute. Enter a new line of code directly below #sidebar and enter "position: fixed;" without the quotes. Alternatively, add "position=fixed" within the <div> tag for the sidebar.
  • You can also search for themes that come pre-configured with a fixed sidebar. Visit the Tumblr Themes page (link in Resources), type "fixed sidebar" into the Search field and then press "Enter." Select one of the themes from the results and then click the "Preview" button to preview the theme. Click the "Install" button to install the theme. Installing a new theme replaces any custom code you added to your previous theme.
  • If you make unwanted changes to your blog's theme, you can recover your previous themes using the Tumblr Recover Custom Theme page (link in Resources).

Related Searches


  • Photo Credit Andersen Ross/Blend Images/Getty Images
Promoted By Zergnet



You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!