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

Store Design
1

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

1 Like
2

@ShaneBond

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

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

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

1 Like
3

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

menu design .png

please note I can change/edit code.

1 Like
4

@ShaneBond

do you have like this?

KetanKumar_0-1623662717072.png
KetanKumar_0-1623662717072.png1920×1080 537 KB

1 Like
5

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!

troubleshooting.png
troubleshooting.png1664×820 389 KB

1 Like
6

@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;}
}
1 Like
7

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.

1 Like
8

@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;}
}
1 Like
9

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

1 Like
10

@ShaneBond

it’s my pleasure to help us

1 Like