0
Welcome Guest! Login
0 items Join Now

SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

Last Post
Search Topic
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

    Posted 10 years 4 months ago
    • Ok - So now I added the code from the other topic that I provided link for to your test RL - this also meant that I added menu class of "rt-drop-left" to joomla menu item. Now on your test site that menu item drops to the left and DOES now work correctly on an IPAD.

      So, have a look at the code I added and try it yourself on your own site.
      @media (min-width: 768px) {
     
    .rt-drop-left:hover > .dropdown {
    right: 100% !important;
    left: auto!important;
    }
     
    .rt-drop-right:hover > .dropdown {
    right: auto!important;
    left: 100% !important;
    }
     
    .gf-menu > .rt-drop-left:hover > .dropdown {
    right: 0 !important;
    left: auto!important;
    }
     
    .gf-menu > .rt-drop-right:hover > .dropdown {
    right: auto!important;
    left: 0 !important;
    }
     
    }
     
    @media (min-width: 768px) and (max-width: 959px) {
     
    .rt-drop-left-tablet:hover > .dropdown {
    right: 100% !important;
    left: auto!important;
    }
     
    .rt-drop-right-tablet:hover > .dropdown {
    right: auto!important;
    left: 100% !important;
    }
     
    .gf-menu > .rt-drop-left-tablet:hover > .dropdown {
    right: 0 !important;
    left: auto!important;
    }
     
    .gf-menu > .rt-drop-right-tablet:hover > .dropdown {
    right: auto!important;
    left: 0 !important;
    }
     
    }
     
    @media (min-width: 960px) and (max-width: 1199px) {
     
    .rt-drop-left-desktop-small:hover > .dropdown {
    right: 100% !important;
    left: auto!important;
    }
     
    .rt-drop-right-desktop-small:hover > .dropdown {
    right: auto!important;
    left: 100% !important;
    }
     
    .gf-menu > .rt-drop-left-desktop-small:hover > .dropdown {
    right: 0 !important;
    left: auto!important;
    }
     
    .gf-menu > .rt-drop-right-desktop-small:hover > .dropdown {
    right: auto!important;
    left: 0 !important;
    }
     
    }
     
    @media (min-width: 1200px) {
     
    .rt-drop-left-desktop-big:hover > .dropdown {
    right: 100% !important;
    left: auto!important;
    }
     
    .rt-drop-right-desktop-big:hover > .dropdown {
    right: auto!important;
    left: 100% !important;
    }
     
    .gf-menu > .rt-drop-left-desktop-big:hover > .dropdown {
    right: 0 !important;
    left: auto!important;
    }
     
    .gf-menu > .rt-drop-right-desktop-big:hover > .dropdown {
    right: auto!important;
    left: 0 !important;
    }
     
    }

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1159928

  • Re: SOLVED Dropdown menu goes off screen when iPad Air is in portrait mode.

    Posted 10 years 4 months ago
    • Thank you Mark!

      You are genuinly outstanding! That new code worked like a charm!
      I chose to use the rt-drop-left-tablet class for the menu item Άρθρα since it affected the tablet while in portrait mode.

      I did however make a small change to the code for aesthetic purposes which I will apply to the rest of the "left" dropdown classes. I don't believe I would need to do something similar for the "right" dropdown classes would I?

      I added this to round out the top left corner and square up the top right
      border-top-left-radius: 5px !important;
      border-top-right-radius: 0px !important;

      I also wanted to line up the right edge to the parent menu button so I changed both
      right: 100% !important;
      and
      right: 0 !important;
      to
      right: -1px !important;
      as you see below

      @media (min-width: 768px) and (max-width: 959px) {
.rt-drop-left-tablet:hover > .dropdown {
  border-top-left-radius: 5px !important;
  border-top-right-radius: 0px !important;
  left: auto!important;
  right: -1px !important;
}
.rt-drop-right-tablet:hover > .dropdown {
  right: auto!important;
  left: 100% !important;
}
.gf-menu > .rt-drop-left-tablet:hover > .dropdown {
  border-top-left-radius: 5px !important;
  border-top-right-radius: 0px !important;
  left: auto!important;
  right: -1px !important;
}
.gf-menu > .rt-drop-right-tablet:hover > .dropdown {
  right: auto!important;
  left: 0 !important;
}
}

      You've been a great help! Thank you again for everything and have a great day!

      best regards,

      Michael

      hca.xeiropraktiki.info
      username: gantry
      password: gantry
    #1159975

Time to create page: 0.067 seconds