Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I have to make a dropdown menu similar to this. Can anyone guide me how can I add icons as shown below:
and my menu looks like this :
Please guide me on how can I add icons in the mega-menu or Dropdown menu. Please don't recommend me any app.
Hi,
Prepare Your Icons
Add Icons to the Menu Items
Code example
<ul class="dropdown-menu">
<li><a href="/collections/all"><i class="fas fa-tshirt"></i> All Products</a></li>
<li><a href="/collections/sale"><i class="fas fa-tag"></i> Sale</a></li>
<li><a href="/collections/new-arrivals"><i class="fas fa-star"></i> New Arrivals</a></li>
</ul>
Replace <i class="fas fa-tshirt"></i> with the appropriate icon class other as well.
Update Mega Menu Layout
Use CSS for style
.dropdown-menu i {
margin-right: 8px;
font-size: 16px;
}
@media (max-width: 768px) {
.dropdown-menu i {
font-size: 14px;
}
}
Check for Responsive Design
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025