Burger-Menu in Landscape Mode on the iPad

  • j4n_solo

    (@j4nsolo)


    7 months ago

    Hello everyone,

    I’ve already tried everything imaginable, but I just can’t find a solution to my problem. That’s why I’m trying my luck here.

    Problem: In Landscape Mode on the iPad, the normal (primary) menu is displayed by default. However, since the display appears in two lines due to the many menu items in this view, I wanted to specify via CSS in the customizer that the mobile menu (which with the 3 points, or in my case the burger menu) is always displayed in landscape mode, regardless of the screen size and the screen resolution. Since I have now tried countless attempts and combinations of CSS code in vain, I simply no longer know any advice. I manage to hide the primary menu (.primary-menu) in landscape mode, but not instead display the mobile menu or the other view of the menu (.menu-modal), as it is displayed in normal mode (portrait format). It is always displayed in portrait format. What is to be done?

    For your information: I tested it with different browsers on the iPad (Safari, Chrome, Brave); unfortunately, another tablet is not available to me.

    I would really be very happy if someone could help me here.

    Thank you in advance.

    Cheers Jan

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Felipe Santos

    (@foosantos)

    Hi there,

    Would you be open to share your site URL, so I can see this specifically on your site?

    Thread Starter j4n_solo

    (@j4nsolo)

    Sorry, completely forgotten. Thanks for the hint.

    Here is the page: https://www.tsg-himbach.de

    However, I have to say that I have deactivated the Landscape Mode – just for the reasons mentioned – via plugin and would be reluctant to reactivate it as long as I have not found a solution for this.

    Moderator Felipe Santos

    (@foosantos)

    Hi there,

    If I understood correctly, you’re trying to force the mobile (burger) menu to appear in landscape mode on an iPad, instead of the default primary menu which splits into two lines due to the number of items.

    I can reproduce it — not only landscape, even when the the width is less than ~1250px.

    I couldn’t find alternatives, especially as this solution seems to be added using JS. The topic will stay open if someone else has recommendations.

    Also, apart from that, if you use one of the new WordPress default themes (like Twenty Twenty-Three), you would be able to edit this directly from the Site Editor without using any code. Maybe that could be an option for you.

    Thread Starter j4n_solo

    (@j4nsolo)

    First of all, thank you for the answer.

    I’m going to do exactly what you’ve summarized. I assumed that you could somehow do it with CSS. In another forum, I was advised to possibly accomplish my project by changing or adjusting the viewport. However, this has not been discussed further. Of course, I would like to avoid that this will cause other problems with the page.

    Switching to another theme is not an option for me, because I do the thing for a tennis club on a voluntary basis and have already invested a lot of time for it. In addition, I have already had to make many adjustments (CSS) because of the dark mode and calendar plugin. Therefore, I would actually like to limit my work only to the maintenance of the page… except – if possible – to fix this problem, because especially on the iPad, some people certainly like to look at websites in landscape format.

    computerdesignforyou

    (@computerdesignforyou)

    I am also having the same issue. Looks like you havent found the solution yet as I went to your website and it is asking me to switch to portrait mode. I am not using 20 20 theme. I am using wprental theme. Tablet landscape doesnt come by default. I created this in responsiveness and gave breakpoint at 1440 as I was testing it in samsung galaxy s8+ tablet. does anyone know how to get this done?

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.