Menü rotated 90 Grad
-
Hello all. I have rotated a menu section on my page by 90 degrees. This is on the right-hand side. Is there a way to align the text in the middle of the page?
I have used the following CSS code so far:
{ -ms-transform: rotate(+90deg); -webkit-transform: rotate(+90deg); transform: rotate(+90deg); z-index: 5; margin-right: -90px; margin-top: 400px;
So that it is on the right side I have ... set
margin-right: -90px;
So that it stands relatively centrally, I have ... entered
margin-top: 400px;
Since there are different browser sizes, I think the text is not displayed all over the right side and in the middle.
Is there a better solution?thanks
-
Dear @Rogue
You may wish to use the
calc
function. That way the menu is responsive to the page (if that what your after, remains center):The following Code:
.second_menu { -ms-transform: rotate(+90deg); -webkit-transform: rotate(+90deg); transform: rotate(+90deg); z-index: 5; margin-top:calc(100vh - 52vh); margin-right:-6vw; }
The result:
I used a
margin-right:-6vw
. Thisvw
is viewport width. That way it remains responsive to resizing of the browser width ways.
Best wishes @Rogue
Richard
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it