How to move the sidebar to the right in TwentyFifteen

- by

I’ve never liked themes with sidebars on the left – probably because we in the western world start reading on the left, and I’d like there to be as little clutter as possible. Or perhaps I’m used to navigation items on the right.

I was looking around for solutions to move the sidebar in Automattic’s TwentyFifteen theme to the right, and several options can be found on the internet. Here are two that worked for me:

Option 1: CSS Tweak

Thanks to the Stack Exchange community, this CSS tweak works a treat (for left-to-right languages):

body:before {
    right: 0;
    left: auto;
	direction: ltr;
.sidebar {
    float: right;
    margin-right: auto;
    margin-left: -100%;
	direction: ltr;
.site-content {
    float: right;
    margin-right: 29.4118%;
    margin-left: auto;
	direction: ltr;
.site-footer {
    float: right;
    margin: 0 35.2941% 0 0;
	direction: ltr;

Add these declarations to your own TwentyFifteen Child Theme and you’re good to go. If added via a CSS widget or to the bottom of the original theme (which is a really bad idea), additional “!important” statements may be necessary.

Kudos to toschero and Anteru for the combined solution to this puzzle. Check out the full discussion here:

Option 2: Pre-made Child Theme

Ruhul Amin from Tips and Tricks HQ has built a ready-to-use child theme and solved this puzzle in PHP. You can check it out here:

If you enjoy my content, please consider supporting me on Ko-fi. In return you can browse this whole site without any pesky ads! More details here.

4 thoughts on “How to move the sidebar to the right in TwentyFifteen”

  1. Yes it is working with a few changes though, but the problem I have is that when the sidebar was to the left, it floated along the page while I was scrolling down the page. It is not working anylonger when the sidebar are to the right, any idea how to solve this?

Leave a Comment!

This site uses Akismet to reduce spam. Learn how your comment data is processed.