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: https://www.w3schools.com/css/css_positioning.asp
 
 


 
17c96688a1a336f6040dd1b6149c3fa8@semplicelabs.desk-mail.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete