CODEWITHSUNDEEP
htmlcss
Flemming Jensen
Flemming Jensen

Reputation: 61

CSS right side menu

I am having a hard time to get a right side menu to align correct to the side.

It will offset from the side when I adjust the width of the thing.

CSS:

.tab {
  position: fixed;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  padding: 0;
  height: 20px;
  width: 80px;
  display: block;
  background-color: #111;
  color: #fed;
  -webkit-transform: rotate(-90.0deg);
  transform: rotate(-90.0deg);
  text-align: center;
}

HTML:

<div class="tab">MENU</div>

http://codepen.io/flemmingdjensen/pen/PZBbaG

Upvotes: 0

Views: 650

Answers (1)

bumpy
bumpy

Reputation: 2002

You need to set the transform-origin.

-webkit-transform: rotate(-90.0deg);
-webkit-transform-origin: bottom right;
transform: rotate(-90.0deg);
transform-origin: bottom right;

http://codepen.io/anon/pen/WrKRbM

Upvotes: 1

Related Questions