Hello,
On my website - https://breath-of-fire.com -, inline main menu works correctly but it’s impossible to show the hamburger menu in the mobile version or with a reduced screen.
What could I do ?
Thank you very much.
Pernelle
1 Like
Hi @Pernelle
I’m Richard Nguyen from PageFly- Free Landing Page Builder
You can try with this code.
Follow this:
Go to Online Store->Theme->Edit code->theme.css ->paste bellow code in top of file
div#menu-drawer {
transform: none !important;
visibility: unset !important;
}
Hope that my solution works for you.
Best regards,
Richard | PageFly
Hi @Pernelle
I think you messed up your code. You are missing a period in front of the menu-drawer.
- From your Admin Page, click Online Store > Themes >Actions > Edit code
- In the Asset folder, open the component-menu-drawer.css
- Find the code below. There should a period in front of menu-drawer. See image below
menu-drawer > details[open] > summary::before {
visibility: visible;
opacity: 1;
transition: opacity var(--duration-default) ease,
visibility var(--duration-default) ease;
}
What it should looks like
Thank you, that was a good idea but it still don’t work…
I don’t understand why…
HI @Pernelle
You can try again with this code.
Follow this:
Go to Online Store->Theme->Edit code->theme.liquid->paste bellow code in tag
div#menu-drawer { transform: none !important; visibility: unset !important; }Please refer to this screenshot: https://prnt.sc/afpBHc_RJbvN
Hi, can you please let me know how you manage to fix it?
Hello, have you managed to solve this? I am facing the same issue on my end as well.
Hi Pernelle, your site is stunning! i’m interested in knowing how did you do to put this language selector on desktop and mobile (with the flags).
And also the code to reduce size of text of your menu on mobile.
It would so nice. Thank you