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

[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:

<nav class="header__inline-menu">
<ul class="list-menu list-menu--inline" role="list">
{% 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 %}
<li class="mega-menu-list">
<a href="#" class="header__menu-item list-menu__item link link--text focus-inset">
{{link.title}}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="10px" width="10px" version="1.1" id="Layer_1" viewBox="0 0 407.437 407.437" xml:space="preserve">
<polygon points="386.258,91.567 203.718,273.512 21.179,91.567 0,112.815 203.718,315.87 407.437,112.815 "/>
</svg>
</a>
<div class="mega-menu-wrapper">
<div class="mega-menu-row">
{% for child_link in block.settings.linklist.links -%}

<div class="mega-menu-column">

<div class="menu-item-inner">
<h3>{{child_link.title}}</h3>
<ul>
{% for sub_child_link in child_link.links %}
<li><a href="{{ sub_child_link.url }}">{{ sub_child_link.title }}</a></li>
{% endfor %}
</ul>
</div>
</div>
{% endfor %}
<div class="mega-menu-column mega-menu-image">
<div class="image-grid">
{% 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%}
<div class="image-box">
<div class="img-product-meta">
<img src="{{block.settings[image] | img_url: '500x'}}'" alt="Outerwear Image">
<div class="product-buttons">
<a href="{{ block.settings[link] }}">Shop Now</a>
</div>
</div>
<div class="product-caption">
<h4>{{ block.settings[caption] }}</h4>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</li>
{% endif %}
{% endfor %}
{% if mega_menu == false %}
<li><a href="{{link.url}}" class="header__menu-item list-menu__item link link--text focus-inset ">{{link.title}}</a></li>
{% endif %}
{% endfor %}
</ul>
</nav>

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)

[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