How to move the sidebar to the right in TwentyFifteen

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):

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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:035.2941%00;

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:

Share this:

Related

About Jay Versluis

Jay is a medical miracle known as a Super Survivor. He runs two YouTube channels, five websites and several podcast feeds. To see what else he's up to, and to support him on his mission to make the world a better place, check out his Patreon Campaign.