Re: How To Fix Megamenu (Shopify Dawn Theme)

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

dreamtechzone_5
Shopify Partner
288 1 34

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

 

Screenshot (7).png433125833_1157665618891192_7634967950487488749_n.jpg

Replies 5 (5)

Dan-From-Ryviu
Shopify Partner
8479 1671 1683

Hi @dreamtechzone_5 

Desktop and mobile do not use the same menu code. 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

dreamtechzone_5
Shopify Partner
288 1 34

OK, How can I fix this?

Please give me the code.

Dan-From-Ryviu
Shopify Partner
8479 1671 1683

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

dreamtechzone_5
Shopify Partner
288 1 34

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
Shopify Partner
691 86 98

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

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.