Hello everyone,
I’m having issues with my mega menu. The dropdown is not showing right. I also would like the dropdown wider and showing Collums. Not sure if anyone can help.
Thank you all!
can you provide site’s URL
Hi @jencdo ,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code at the bottom of the file → Save
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
Thank you for your help! Unfortunately, the code did not work.
Here it is.
Hi @jencdo ,
Seems like you have switched to your menu to dropdown. However, i have created a CSS to fix your mega menu. Please add below CSS to the theme.liquid
Steps to add CSS:
Step 1: Go to Online Store > Themes > Active theme > Edit
Step 2: Search for “theme.liquid”
Step 3: Add the CSS above “”
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Mangit
Hi @jencdo ,
Looks like the CSS that you have added to the theme.liquid file is not added correctly.
Please replace the whole block with below codes.
Regarding "Can you help me make my phone view similar to my desktop view? "
=> Do you mean you want both the navigation to be displayed on mobile device as well? Actually, one of the menu that is present on the header is default menu of the theme, which gets converted into a side drawer. If you need to convert this to a different style, we will have to make changes to the file that renders the menu.
Also, due to the width of the menu, the navigation will break into multiple lines.
Please review this and let me know how do u think the menu should look on the mobile?
Thanks a lot for the help, but the code did not make any changes to the mobile view.
I really would like to make my menu look the same as my desktop if there’s a way to do that, but if not, I go with whatever you think is appreciate for the mobile view for both menus or whatever works.
The mega menu is not working properly either. It looks like for both menus the only way to make them work is to make them like in desktop view and have the font size adjust automatically for mobile.
Hi @jencdo ,
I have added !important attribute to all the css. So, this should work for mobile as well.
Please replace this code with earlier one. After adding this the mega menu on mobile should like this.
Regarding, making both the menu look the same as the desktop
=> For this to work, we must make changes to the theme files that render the actual menu. We will have to redesign the entire menu bar, which requires updating the liquid files. For now, I have applied some spacing to the second menu so that it looks symmetrical. The first menu is inside the size drawer.
Thank you! It is now better like the one you shared.