Fixed & Rotated 90 Degree Elements on Page

Last Updated: Jan 21, 2018
Note: We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.
To make elements or text on your page fixed and rotated, follow these steps:
1. Create the elements you want to be fixed on your page. You can place them
anywhere on the page since they will be floated.
2. Assign these elements a classname. In this example we will use "fixed-item"
3. If you want an element to be positioned in the bottom right of your page, for example,
add the CSS code like this in the the Global CSS editor:
.fixed-item {
  display: inline-block !important;
  height: 60px !important;
  width: 500px !important;
  position: fixed !important;
  right: 5% !important;
  bottom: 5% !important;
  z-index: 100 !important;
If you want an item fixed to the center right of the page, do this:
.vertically-centered-fixed-item {
  display: inline-block !important;
  height: 60px !important;
  width: 500px !important;
  position: fixed !important;
  right: -200px !important;
  top: 50% !important;
  z-index: 100 !important;
    -webkit-transform: translateY(-50%) rotate(90deg);
        -ms-transform: translateY(-50%) rotate(90deg);
            transform: translateY(-50%) rotate(90deg);
You can play around with these values to get the effect you're looking for. We recommend disabling or hiding fixed elements on mobile as they don't render well. 

To learn more about CSS positioning, you can read this article:
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found