How to turn my navbar menu into hamburger icon on iPad for debut theme

[ShaneBond]

Hi! I am getting trouble making a responsive navbar menu in the debut theme. on the iPad, I wanted to show the hamburger icon instead of the navbar menu. how do I achieve that? Thank you

[KetanKumar · Accepted solution]

@ShaneBond 

can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
 /* this code work only Ipad your css rules for ipad portrait */
.site-header__menu {
    display: inline-block;
}
nav#AccessibleNav {
    display: none;
}
.grid__item.medium-up--one-quarter.logo-align--left {
    width: 100%;
}
.mobile-nav-wrapper {display: inline-block !important;}
}

[KetanKumar]

@ShaneBond 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[ShaneBond]

Thank you, Ketan for your reply.
The URL: https://www.designercroccharm.com/

I wanted to show the hamburger icon on iPad(like mobile) instead of the whole navbar. also can you please suggest me how can I move the navbar that means the text-align to the left in the desktop so that my menu will show just beside the logo(see the attachment below) and, on the right side I want to show a FAQ button just like the below attachment? Thank you

please note I can change/edit code.

[KetanKumar]

@ShaneBond 

do you have like this?

[ShaneBond]

Hi, Ketan. sorry to interrupt you again. it's perfect! How did you achieve that? I tried to copy the css code and that is my weird result!

[KetanKumar · Accepted solution]

@ShaneBond 

can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
 /* this code work only Ipad your css rules for ipad portrait */
.site-header__menu {
    display: inline-block;
}
nav#AccessibleNav {
    display: none;
}
.grid__item.medium-up--one-quarter.logo-align--left {
    width: 100%;
}
.mobile-nav-wrapper {display: inline-block !important;}
}

[ShaneBond]

Though it's not working for the iPad pro, I am very satisfied with the result. I appreciate your time and quick response.

Thank you.

[KetanKumar · Accepted solution]

@ShaneBond 

can you please try this code

@media (min-width:768px ) and (max-width:1024px) {
 /* this code work only Ipad your css rules for ipad portrait */
.site-header__menu {
    display: inline-block;
}
nav#AccessibleNav {
    display: none;
}
.grid__item.medium-up--one-quarter.logo-align--left {
    width: 100%;
}
.mobile-nav-wrapper {display: inline-block !important;}
}

[ShaneBond]

Hi, Ketan. you are amazing! yes, all the issue has been fixed. Thank you.

[KetanKumar]

@ShaneBond 

it's my pleasure to help us