7.1 Force Hamburger Menu with iPad

Site URL: https://www.jonathanong.com

I've done a Split Navigation using Custom CSS which works fine for desktops. But on the Ipad the links seem to jump to the next line under the logo. Is there a way to force the navigation links into a hamburger menu like on the mobile?

I tried using this code but then the logo went off center. Can anyone help?

@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

Your split nav doesn't work below 988px. That's when the nav moves to 2 lines. You're seeing this on your iPad due to its screen dimensions, but remember that it will appear like this for anybody on a smaller laptop screen or with a smaller browser window. Hamburger doesn't kick in until 800px or less.

I suggest amending your custom CSS to lay the navigation out to work perfectly at 800px. Then test it see how it grows to fit a bigger screen, rather than the other way around. Otherwise, you'll want to change the media queries to have your hamburger kick in at 988px, which feels a little large to be switching to a mobile nav, but that's your call.

Hi. Do you still need help on this? 

@tuanphan yes some help would greatly be appreciated!

On 1/5/2021 at 5:01 PM, jonongec said:

@tuanphan yes some help would greatly be appreciated!

I see iPad uses burger menu here.

Strange, on my iPad Air it’s like my first screenshot where the navigation goes into a second line. @tuanphan

On 1/7/2021 at 9:29 AM, jonongec said:

Strange, on my iPad Air it’s like my first screenshot where the navigation goes into a second line. @tuanphan

Try this new CSS

@media screen and (min-width:768px) and (max-width:1024px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

@tuanphan

nope didn’t work 😞

I See burger here/

@tuanphan

hmmm that’s strange. On my iPad Air it’s still the 2 lined navigation.

My website currently doesn’t have your code, so is it possible you are seeing it on a smaller screen hence automatically going to burger menu? When I tilt my iPad vertically I also see the burger menu.

@tuanphan

I've done a screen recording of me minimizing my screen on my desktop to the point where the navigation becomes 2 lines

are you able to help me code it such that it will never be 2 lines but instead jump to burger menu? thank you in advance!

Any chance you had some time to have a look at it @tuanphan?

@stressbunny are you able to help me with the coding for the hamburger to kick in at 988px?

I'm experiencing the same problem. We have an iPad Air 4th generation here that will not show the hamburger menu, even after trying several codes. Because I have a mega menu on my website it's not user friendly on an iPad, which is why I would love to set the hamburger menu for these kind of devices. Hopefully someone can help me/us out?

My website is www.wandertowonder.nl.

Thanks a million!

@jonongec @tuanphan

On 7/3/2023 at 2:32 PM, efranken said:

I'm experiencing the same problem. We have an iPad Air 4th generation here that will not show the hamburger menu, even after trying several codes. Because I have a mega menu on my website it's not user friendly on an iPad, which is why I would love to set the hamburger menu for these kind of devices. Hopefully someone can help me/us out?

My website is www.wandertowonder.nl.

Thanks a million!

@jonongec @tuanphan

Try this

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}