Why isn't my coded megamenu displaying images on mobile mode?

[dreamtechzone_5]

Hello Everyone!

I am using Shopify Dawn theme. I have created megamenu by coding but when I click underwear and dress image the product of underwear and dress is not showing. Also, underwear and dress images are not showing in mobile mode. Please help me. Thank you.
Srore url: https://blue-chic-clothes.myshopify.com/
Password: Admin

[Dan-From-Ryviu]

Hi @dreamtechzone_5

Desktop and mobile do not use the same menu code.

[dreamtechzone_5]

OK, How can I fix this?

Please give me the code.

[Dan-From-Ryviu]

You must customize the code that your store is using to display menu on mobile

[PageFly-Theodor]

Hi @dreamtechzone_5 ,
This is Theodore from PageFly - Shopify Page Builder App.

I think you can contact Shopify for support in displaying images in Megamenu. Because mobile and desktop are two different browsers and different sizes, the image not showing may be a feature of megameu. Finally, you can search and customize in the theme editor

Best regards,
Theodore | PageFly

[dreamtechzone_5]

header.liquid file:

,
{
“type”: “menu”,
“name”: “Menu”,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “Title”
},
{
“type”: “link_list”,
“id”: “linklist”,
“label”: “Linklist”
},
{
“type”: “image_picker”,
“id”: “image_1”,
“label”: “Image 1”
},
{
“type”: “text”,
“id”: “caption_1”,
“label”: “Caption 1”
},
{
“type”: “url”,
“id”: “link_1”,
“label”: “Link 1”
},
{
“type”: “image_picker”,
“id”: “image_2”,
“label”: “Image 2”
},
{
“type”: “text”,
“id”: “caption_2”,
“label”: “Caption 2”
},
{
“type”: “url”,
“id”: “link_2”,
“label”: “Link 2”
},
{
“type”: “image_picker”,
“id”: “image_3”,
“label”: “Image 3”
},
{
“type”: “text”,
“id”: “caption_3”,
“label”: “Caption 3”
},
{
“type”: “url”,
“id”: “link_3”,
“label”: “Link 3”
},
{
“type”: “image_picker”,
“id”: “image_4”,
“label”: “Image 4”
},
{
“type”: “text”,
“id”: “caption_4”,
“label”: “Caption 4”
},
{
“type”: “url”,
“id”: “link_4”,
“label”: “Link 4”
}
]
}

header-dropdown-menu.liquid snippets:

{% for link in section.settings.menu.links %} {% assign mega_menu = false %} {% for block in section.blocks %} {% if block.settings.title == link.title %} {% assign mega_menu = true %}
• {{link.title}}
  {% for child_link in block.settings.linklist.links -%}

  {{child_link.title}}

  {% for sub_child_link in child_link.links %}
  • {{ sub_child_link.title }}
  {% endfor %}

  {% endfor %}

  {% for i in (1..4) %} {% assign caption = "caption_" | append : i %} {% assign image = "image_" | append : i %} {% assign link = "link_" | append : i %} {% if block.settings[image] != blank%}

  Shop Now

  {{ block.settings[caption] }}

  {% endif %} {% endfor %}
{% endif %} {% endfor %} {% if mega_menu == false %}
• {{link.title}}
{% endif %} {% endfor %}

Base.css File:

.mega-menu-wrapper {
display: none;
position: absolute;
top: calc(100% - 20px);
left: 0;
right: 0;
width: 100%;
background: #fff;
box-shadow: 0 6px 5px rgba(0, 0, 0, 0.1);
z-index: 1;
}

.mega-menu-list:hover .mega-menu-wrapper {
display: block;
}
.mega-menu-list a svg{
margin-left: 5px;
display: inline-block;
max-width: 8px;
}
.mega-menu-row {
display: flex;
padding: 20px;
justify-content: space-between;
}

.mega-menu-column {
flex: 1;
padding: 0 10px;
}

.menu-item-inner {
margin-bottom: 20px;
}

.mega-menu-wrapper h3 {
font-size: 17px;
margin-bottom: 8px;
color: #444;
font-weight: 600;
}

.mega-menu-wrapper ul {
list-style: none;
padding: 0;
}

.mega-menu-wrapper ul li {
margin: 0;
padding: 2px 0;
}

.mega-menu-image {
flex: 1;
}

.mega-menu-wrapper ul li a{
text-decoration: none;
color: #777;
font-size: 16px;
display: inline-block;
transition: all 0.4s;
}
.mega-menu-wrapper ul li a:hover{
color: #333;
text-decoration: underline;
}

.image-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 15px;
}

.image-box {
padding-bottom: 10px;
}
.image-box img{
transition: transform 0.2s ease-in-out;
}

.image-box img {
width: 100%;
height: 200px;
object-fit: cover;
}

.image-box:hover img{
transform: scale(1.05);
opacity: 0.8;
}
.img-product-meta {
position: relative;
overflow: hidden;
}

.img-product-meta .product-buttons {
position: absolute;
bottom: -35px;
left: 0;
right: 0;
width: 100%;
text-align: center;
opacity: 0;
transition: all 0.3s;
}

.img-product-meta:hover .product-buttons{
bottom: 7px;
opacity: 1;
}

.product-caption {
text-align: center;
overflow: hidden;
}

.product-caption h4 {
margin: 0 0 0 0;
font-size: 14px;
}

.img-product-meta .product-buttons a {
display: block;
font-size: 14px;
text-decoration: none;
background: #fff;
color: #333;
padding: 6px;
transition: all 0.3s;
}

.img-product-meta .product-buttons a:hover{
background: #222;
color: #fff;
}

(These codes have been done)