Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Menü rotated 90 Grad

Menü rotated 90 Grad

Scheduled Pinned Locked Moved General Discussion
4 Posts 2 Posters 503 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R
    R
    Rogue
    wrote on last edited by
    #1

    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?

    C-─-K.png

    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

    1 Reply Last reply
    0
    • RichardR
      RichardR
      Richard
      Global Moderator
      wrote on last edited by
      #2

      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:
      Screen Shot 2022-01-27 at 9.04.18 AM.png

      I used a margin-right:-6vw . This vw is viewport width. That way it remains responsive to resizing of the browser width ways.

      https://www.w3schools.com/cssref/func_calc.asp


      Best wishes @Rogue
      Richard
      R 1 Reply Last reply
      0
      • RichardR Richard

        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:
        Screen Shot 2022-01-27 at 9.04.18 AM.png

        I used a margin-right:-6vw . This vw is viewport width. That way it remains responsive to resizing of the browser width ways.

        https://www.w3schools.com/cssref/func_calc.asp


        Best wishes @Rogue
        Richard
        R
        R
        Rogue
        wrote on last edited by
        #3

        @Richard Thank you very much Richard. That helped me :)

        1 Reply Last reply
        0
        • RichardR
          RichardR
          Richard
          Global Moderator
          wrote on last edited by
          #4

          Thanks @Rogue have a wonderful day & thanks for supporting Lay Theme! 🌻

          1 Reply Last reply
          0

          Hello! It looks like you're interested in this conversation, but you don't have an account yet.

          Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

          With your input, this post could be even better 💗

          Register Login
          Reply
          • Reply as topic
          Log in to reply
          • Oldest to Newest
          • Newest to Oldest
          • Most Votes


          Online Users
          M
          michael_vvc
          C
          craigfeldspar
          Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
          laytheme.com
          • Login

          • Don't have an account? Register

          • Login or register to search.
          • First post
            Last post
          0
          • Recent
          • Tags
          • Popular
          • Users
          • Search