Hamburger menu not working on iPad

[Lorenmn]

Hi,

Not sure whats happening here. I amended the breakpoints so the hamburger menu showed on iPad too, however, when you click the icon, the navigation doesn’t appear. It’s on this site - http://afitterlife.co.uk

I’d added this in the customiser CSS section

@media (max-width: 1200px) {
a.x-btn-navbar {
    display: inline-block;
    float: right;
}
   .x-nav-wrap.mobile.collapse.in {
  display: block;
}
   .x-nav-wrap.desktop {
display: none;
   }
}

What have I done wrong?

[basanta]

Hi There,

Thanks for writing in!

It’s not recommended to break the default device breakpoints. The theme has its own default breakpoint CSS which work perfectly for different devices.

Can you please try this CSS and let us know if that works.

@media (max-width: 1200px) {
a.x-btn-navbar {
    display: inline-block;
    float: right;
}
   .x-nav-wrap.mobile.collapse.in {
  display: block;
}
   .x-nav-wrap.desktop {
display: none;
   }
.x-nav-wrap.mobile.x-collapsed {
    display: none;
}
.x-nav-wrap.mobile {
    display: block;
}
}

Hope this helps!

Unfortunately, we can’t help any more on this because this is something related to a custom code which is out of our theme support scope.

Thanks

[Lorenmn]

Hi.

It definitely doesn’t work ‘perfectly’, otherwise I wouldn’t have to adjust the break points.

However, the code you provided has done the trick.

Thanks.

[basanta]

Glad to know!

Thanks you!