Burger Menu Button on Ipad

Support
#1

Hi there,

I have Integrity installed on my website. I have a problem with the burger menu button on the ipad. It works fine in portrait mode but in landscape mode it doesn’t work.

When I built the site I remember contacting you because my menu was too big for the ipad and on landscape mode it folded round to two lines. You provided me with code so that the burger menu button was displayed in landscape as well as portrait views. I seem to remember it working but recently I have noticed it only working in portrait mode.

Do you have any ides why?

www.madhen.net

I am running the very latest updates.

Many thanks,

Paul

#2

Hi there,

I am not sure what was the customization before but I come up with a CSS code that partially makes the menu work for landscape mode. It only does not have the animation effect. Please add the code below to Pro > Theme Options > CSS:

@media (max-width: 1277px) and (min-width: 979px) {
 .x-nav-wrap.mobile.x-collapsed {
    display: block;
    transition: height 0.3s ease;
 }   
}

Thank you.

#3

Hi,

thanks for the reply.

I have added the code and it does work, however…every time I click on a new page from the menu button, the new page loads and the menu is open, expanded so hides the page content until I click the menu button twice to close it. It’s not really suitable like that.

Is it possible to tweak the code so that it behaves as normal?

Many thanks.

#4

Hi there,

Would you mind providing a video recording showing the issue when you clicked on a new page? Or just instructions on how we can reproduce the issue. I don’t know its relation to the actual menu, but requiring a double click means there is a javascript involved and not just CSS.

Thanks!

#5

Hi there,

again thanks for getting back to me.

I have added the code once again so you can visit madhen.net on an ipad and hopefully see what I am talking about.

Everything is fine when viewing in portrait mode but when in landscape that’s where the problems occur. Turning from portrait to landscape opens the menu which isn’t ideal. Visiting any page in landscape mode results in the menu being open and hiding the page content. Most of the time, but not always, the menu button needs to be pressed twice to close it.

Many thanks again for great support.
Paul.

#6

Hi there,

There are two mobile menu, one is on top which scrolls to the correct mobile menu (hence, the top is proxy button that triggers the main mobile menu). What I’m seeing is, for every page reload, the mobile menu is open, clicking the burger menu close it (no clicking twice). Looks like it’s different from what I’m seeing.

What’s your IOS and Safari version?

Thanks!

#7

Hi,

sorry I not sure I understand your reply really. I don’t know what you mean by there being two mobile menus?

I am using the latest update on the ipad.

You are correct, with every page reload in landscape view the mobile menu is open and i need to click the burger menu to close it. I don’t want this. I would like the menu to stay closed until the button is clicked. If a new page is loaded I need the menu to be closed as normal. The burger menu works fine in portrait mode, the same as it does on a mobile phone. It’s only in landscape mode that there’s this issue. Before I added the code provided to me by one of your colleagues, the burger didn’t do anything when in landscape mode but was fine in portrait.

Hope this clears things up and thanks again for the continued support.

Thanks.

#8

Hi there,

As the code I mentioned is not working for you. Please remove that code and get back to us with the URL/User/Pass of your website using Secure note. So that I can see what was the original customization code and how can I help you on this matter.

needless to say that the original customization and our try for the new one are all outside of our support scope and we can not guarantee a working solution as that feature is not available out of the box in our theme. Our theme shows the main menu on iPad landscape and not the mobile menu.

Thank you for your understanding.

#9

Hi,

I have deleted the code so things back to as they were.

I have saved a secure note with my wordpress login details on my previous post. I couldn’t find any other way to ad it on this post.

Many thanks again.

Paul

#10

Hi there,

Sorry, but I still don’t understand the issue, especially about the double clicking. Would best if you can provide a video recording, a visual guide is always helpful when comparing what we see.

Thanks!

#11

Hi there,

I may have lead you astray with the double clicking problem. That isn’t the main problem so forget about that.

I have recorded a video. At the start I show you how the button works correctly when in portrait mode, press the button, menu expands, click on a new page, it loads with the menu collapsed, which is what anyone would expect. You will see when I switch to landscape that the menu is expanded and hides the screen content until the button is pressed to close it. With every new page that I load, the menu is expanded and has to be clicked to hide. I am never sure which page I am on until the menu is clicked to hide it. This is the problem.

Even switching from portrait to landscape opens the menu without having pressed the burger button. If the menu is closed in portrait and I switch to landscape the menu expands open. Closes again when going back to portrait. The reverse happens if the menu is expanded in portrait…go to landscape and it’s closed. Whatever position the menu is in in portrait, swapping to landscape does the opposite.

I just want to button to behave as it does in portrait mode, this is correct. How it behaves in landscape is the problem. If I remove the code supplied in this thread the burger button doesn’t do anything in landscape mode.

I hope I am making sense?

Burger Button Problem

Many thanks again,
Paul

#12

Hi there,

I deeply checked the case and found out that the solution which was given to you before to challenge the menu items to go to the second line is not a good one. You know by expanding the mobile menu to a wider screen size there are lots of customization should be done to challenge the problem and it is indeed nearly impossible in the new version of the theme.

Instead of that I changed the CSS code and added the one below:

@media (min-width: 980px) and (max-width: 999px) {
    .x-navbar .desktop .x-nav > li > a {
        font-size: 12px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }
}

@media (min-width: 1000px) and (max-width: 1099px) {
    .x-navbar .desktop .x-nav > li > a {
        font-size: 12px !important;
        padding-left: 11px !important;
        padding-right: 11px !important;
    }
}

@media (min-width: 1099px) and (max-width: 1199px) {
    .x-navbar .desktop .x-nav > li > a {
        font-size: 14px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1299px) {
    .x-navbar .desktop .x-nav > li > a {
        font-size: 15px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

The code below makes the menu items smaller in different viewports which causes the menu items to be always in one line. So for this case, the portrait mode will have the mobile menu and the landscape more the normal menu.= in one line.

Unfortunately, we can not give a customization of having the mobile menu in the landscape mode with the new codebase.

Thank you for your understanding.

#13

Hi,

thanks again for looking into this for me. I have checked the site again on the ipad and your solution would be perfect, at the minute I have the traditional menu all on one line in landscape view which is great. However the expanded mobile menu is also open in this view. I now have no way of closing the mobile menu so I can’t see the page content at all in this view.

Would it be possible to tweak the code so that the expanded mobile menu doesn’t show in landscape?

Many thanks again.

Paul

#14

Hi there,

ignore my last email. The original code you provided was still there so I removed it and it’s working perfectly.
Huge thanks for all your work on this and I have to say the solution is much better than having the burger button in landscape mode.

My site is now working perfectly on the ipad.

Fantastic support as always. Amazing.

Thank you.

Paul

#15

Glad that we could be of a help :slight_smile:

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.