How can I modify the mobile mega menu in Turbo theme?

[mnross]

Hi there! I’m hoping someone can help me out. I am using the Turbo theme and I have two things I would like to fix in the Mega Menus on Mobile.

1. I would like to hide the images on mobile that are used as well as the text underneath (so the first column of the menu) used in the Mega Menus but have them visible on desktop.

2. Is there a way to have the menus within the header not connected to a link but when clicked just open up the mega menu?

I would appreciate any advice! Thanks so much.

Here is the preview link https://id6tdyrnaycbsp8w-50997756061.shopifypreview.com

[KetanKumar]

@mnross

sorry for late review please add this code

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

@media only screen and (max-width: 798px) {
.mobile-mega-menu_block a img {display: none;}
li.mobile-mega-menu_block {
    display: none !important;
}
}

[mnross]

Thank you @KetanKumar !

That worked well to hide the image, however it does not hide the text in the column. I need to hide the full first column of the Mega Menu in only two of the Mega Menus. The menu that appears under ‘Collection’ and the Mega Menu that appears under ‘About’. There is text in that column as well. Is there a way to do that?

I am attaching screen shots. Thank you!

Thank you so much for your help.

[KetanKumar]

@mnross

thanks for update i have update my code can you please check and update on your file

[mnross]

Thank you for the quick update @KetanKumar !

Unfortunately that removed the menu details completely. We just need to remove the first column that has the image and text underneath the image, but leave the second column

Please let me know if there is something else we can try. Thanks!

[KetanKumar]

@mnross

oh sorry for this

if possible to give me screenshot with rough idea? how to like on mobile

[mnross]

@KetanKumar Yep definitely!

So this hides everything that was in the first column of those two mega menus. In case it matters, these menus are labeled ‘Mega menu 2’ and ‘Mega menu 3’ in the theme editor.

Please note that I do not want to hide any columns from the first Mega Menu which is ‘shop’.

I am also attaching an image from the desktop view circling with the column that I want to hide for mobile.

[KetanKumar]

@mnross

can you please confirm

[mnross]

@KetanKumar yes exactly! That same type of column appears in Mega menu 2 (Collections) and Mega menu 3 (About). I would like to hide it on mobile only.

[KetanKumar]

@mnross

thanks for clear can you please first remove my code i have give latest code after remove add below code

@media only screen and (max-width: 798px) {
#mobile_menu li:nth-child(3) ul div:nth-child(1), #mobile_menu li:nth-child(4) ul div:nth-child(1) {display: none;}
}

[mnross]

@KetanKumar It worked! Thank you so much!

[KetanKumar]

@mnross

it’s my pleasure to help us

[AhmedGhaziii]

wonderful landing page ,

can you give me the the page code?

[KetanKumar]

@AhmedGhaziii

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.

can you please more details further issue

[AhmedGhaziii]

Hello, I have no issue here

just i want to build a collection page as this guy

https://id6tdyrnaycbsp8w-50997756061.shopifypreview.com/

---

this is our collection page and how it look like

[Find All of Our Collections of ebarza Online Furniture in UAE](https://www.ebarza.com/collections\)

[KetanKumar]

@AhmedGhaziii

can you please share more details please

[AhmedGhaziii]

Hello dear I explained it here maybe better .. Please check

https://community.shopify.com/post/1188915

[KetanKumar]

@AhmedGhaziii

oh i see

sorry home page doesn’t allow page template at home page but you have add index.liquid if and else condition you have change look

for example

{%- if template == 'landing-page' -%}
	Landing page code here
 {%- else -%}
    {{ content_for_index }}
    {%- endif -%}

[AhmedGhaziii]

Hello, I need to create a page with slider + product grid + videos as the home page gave us a lot of options

we need to use this options on other pages

is not possible ?

[KetanKumar]

@AhmedGhaziii

yes, if are you able to code can you create custom section each page different if nor able to code so it can be done on custom code