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

Solved
ShaneBond
Excursionist
15 0 20

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
Shopify Partner
20534 2123 7749

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ShaneBond
Excursionist
15 0 20

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.

KetanKumar
Shopify Partner
20534 2123 7749

@ShaneBond 

do you have like this?

KetanKumar_0-1623662717072.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ShaneBond
Excursionist
15 0 20

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

KetanKumar
Shopify Partner
20534 2123 7749

This is an 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;}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ShaneBond
Excursionist
15 0 20

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
Shopify Partner
20534 2123 7749

This is an 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;}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ShaneBond
Excursionist
15 0 20

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

KetanKumar
Shopify Partner
20534 2123 7749

@ShaneBond 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing