Have you ever wanted to have a fixed element on the sidebar, whether it be on the left or right side of the page. It’s pretty simple to do but when you rotate the element, you might notice that the positioning goes away from the sidebar.
Here is an example of the kind of thing I’m talking about here:
You see the ‘Book a free consultation’ text? That’s what we’re talking about here…
How to create a fixed rotated left sidebar element
So let’s say we have the following HTML:-
<div id="left-sidebar">
<h6>
LEFT SIDEBAR
</h6>
</div>
To make this fixed to the left position and vertically centred regardless of the width and height of the element, we can do the following:
#left-sidebar {
position: fixed;
display: block;
background: #ae77b3;
top: 50%;
left: 0;
padding: 10px 20px;
transform: rotate(-90deg) translateX(-50%);
transform-origin: left top;
color: #FFF;
letter-spacing: 2px;
}
The key thing to get the positioning correct (fixed to the sidebar) is the transform-origin
property. Since it’s a left aligned sidebar we are using ‘left top’, this will remove the gap when you do the rotation. What keeps the element centred on the page regardless of the width is the transform
property. You can see we added ‘translateX(-50%)’, this is what is correcting this issue. Pretty neat huh?
How to create a fixed rotated right sidebar element
This one is similar to the left sidebar, we just change a couple of values here…
So now we have the following HTML:
<div id="right-sidebar">
<h6>
RIGHT SIDEBAR
</h6>
</div>
and here is the CSS to go with it:
#right-sidebar {
position: fixed;
display: block;
background: #ae77b3;
top: 50%;
right: 0;
padding: 10px 20px;
transform: rotate(-270deg) translateX(50%);
transform-origin: right top;
color: #FFF;
letter-spacing: 2px;
}
You will see we made two changes here… Since it is right-aligned now, we change the transform
property and the transform-origin
. We rotated it the other way around using -270deg and made transforms 50% instead of -50%. With the origin, we simply changed it from left top to right top. Pretty straight forward right?
If you want to check out the JSFiddle for the above example click here.
Well, that wraps up today’s tutorial, we hope this helps you! As always, if you have any queries then simply drop us a comment below.