CSS: Rotate 90 deg nav and stick to top left corner

Question

I want to have my nav rotated 90 degrees and stuck into the top left corner of the viewport, like shown in the sketch I made bellow:

Code:

<div style="width:100vh; height:100px; display:flex; align-items:center; justify-content:space-around; background-color:#CCC; position:fixed; top:0px; left:0px; ">
            <span style="font-size:20px; color:red;">LINK</span>
            <span style="font-size:20px; color:red;">LINK</span>
            <span style="font-size:20px; color:red;">LINK</span>
            <span style="font-size:20px; color:red;">LINK</span>
            <span style="font-size:20px; color:red;">LINK</span>
        </div>

Does this answer your question? [How can I rotate an HTML
90 degrees?](https://stackoverflow.com/questions/14233341/how-can-i-rotate-an-html-div-90-degrees) — kmoser, Aug 16 '20 at 18:19
Out of principle, I will only provide an answer if one of the following conditions is true: a) you display minimal research effort or b) you remove inline styling. — tao, Aug 16 '20 at 18:19
There's nothing wrong with inline styling if it helps create a [MRE](https://stackoverflow.com/help/minimal-reproducible-example). — kmoser, Aug 16 '20 at 18:22
@kmoser, I never said it's wrong (although it is, since we opened the subject - try writing responsve CSS inline, for starters). I just said I won't answer unless one of the conditions is true. It's their choice if they want an answer from me or not. — tao, Aug 16 '20 at 18:28

score 3 · Answer 1 · answered Aug 16 '20 at 18:21

3

You need:

transform: rotate(-90deg) translate(-100%, 0);
transform-origin: left top;

As shown here: https://stackoverflow.com/a/14233398/378779

answered Aug 16 '20 at 18:21

kmoser

8,780
3
24
40

score 0 · Answer 2 · answered Aug 16 '20 at 18:30

This should work

<div style="background-color:white; 
   height: 100px;
  width: 100%;
  display:flex; 
  align-items:center; 
  justify-content:space-around; 
  transform: rotate(-90deg) translate(-100%, 0);
  border: 1px solid red;
  transform-origin: left top;">
            <span style="font-size:20px; color:red;">LINK</span>
            <span style="font-size:20px; color:red;">LINK</span>
            <span style="font-size:20px; color:red;">LINK</span>
            <span style="font-size:20px; color:red;">LINK</span>
            <span style="font-size:20px; color:red;">LINK</span>
        </div>

Riyas Ac · Answer 3 · 2020-08-16T19:22:18.537

span {
 writing-mode:sideways-lr;
 display:block;
 padding:calc(100px / 2 - 8px);
 font-size:20px;
 color:red;
}
body{
 background-color:blue;    
}

<div style="width:108px; height:100%;background-color:#fff;display:block;margin:-8px;outline-offset:-6px;outline: 1px solid red;">
            <span >LINK</span>
            <span >LINK</span>
            <span >LINK</span>
            <span >LINK</span>
            <span >LINK</span>
        </div>

score 0 · Answer 4 · answered Aug 16 '20 at 19:09

You can use the CSS transform property to rotate the nav bar 90°. The code below also takes out the inline styles.

nav {
  width: 100vh;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #CCC;
  position: fixed;
  top: 0px;
  left: 0px;
  
  /* rotate 90° */
  transform: rotate(90deg);
}

.link {
  font-size: 20px;
  color: red;
}

<nav>
  <span class="link">LINK</span>
  <span class="link">LINK</span>
  <span class="link">LINK</span>
  <span class="link">LINK</span>
  <span class="link">LINK</span>
</nav>

CSS: Rotate 90 deg nav and stick to top left corner

4 Answers4