Icons for Header Menu

Store Design
,
1

hi All

I am new on here but have been using shopify

a long time. I am looking for some help to design a menu like the screenshot attached. The site is on is

Screenshot 2025-09-20 at 15.39.58
Screenshot 2025-09-20 at 15.39.581461×495 161 KB

The site is not using shopify but I am hoping I can do something similar.

Thanks!

2

Hi, Do you want the icons in the menu only or you want the images in megamenu also just like the Screenshot you shared?

And can you share the URL of your store?

3

Hi and welcome!

From your screenshot, that looks like a mega menu – where hovering (or clicking) a top-level item opens a large dropdown with multiple columns, icons/images, and extra links.

You don’t need Shopify specifically to build something like this. You can recreate it with plain HTML + CSS, and then enhance it with a little JavaScript for mobile. Here’s a simple starter example:

<nav class="main-nav">
  <ul class="menu">
    <li><a href="#">Fly Rods</a></li>
    <li><a href="#">Fly Reels</a></li>
    <li class="has-mega">
      <a href="#">Fly Lines</a>
      <div class="mega-menu">
        <div class="mega-left">
          <a href="#"><img src="single.png">Single-handed</a>
          <a href="#"><img src="double.png">Double-handed</a>
          <a href="#"><img src="switch.png">Switch</a>
          <a href="#"><img src="backing.png">Backing</a>
        </div>
        <div class="mega-right">
          <h4>All Products from Fly Lines</h4>
          <ul>
            <li><a href="#">Offers from Fly Lines</a></li>
            <li><a href="#">New Arrivals</a></li>
            <li><a href="#">Nextcast Lines: Overview</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li><a href="#">Clothing</a></li>
    <li><a href="#">Fly Tying</a></li>
    <li><a href="#">Flies</a></li>
  </ul>
</nav>


.main-nav { background:#003366; }
.menu { display:flex; list-style:none; margin:0; padding:0; }
.menu > li { position:relative; }
.menu > li > a { display:block; padding:15px 20px; color:#fff; text-decoration:none; }
.menu > li:hover { background:#0055a5; }

.mega-menu {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  width:700px;
  background:#fff;
  padding:20px;
  box-shadow:0 3px 8px rgba(0,0,0,0.2);
}
.has-mega:hover .mega-menu { display:flex; gap:30px; }

.mega-left a {
  display:flex; align-items:center; margin-bottom:10px;
  color:#333; text-decoration:none;
}
.mega-left img { width:40px; height:40px; margin-right:10px; }
.mega-right h4 { margin-bottom:10px; font-weight:bold; }
.mega-right ul { list-style:none; padding:0; }
.mega-right ul li { margin-bottom:8px; }
.mega-right ul li a { text-decoration:none; color:#0055a5; }

That will give you a two-column dropdown with images/icons on the left and text links on the right, similar to your screenshot.

4

Hi @Clonanav

Ok dear, please send me your store collaborator code so I can implement it the same way as shown in your screenshot.

5

Hi @Clonanav :waving_hand:

That’s a really clean mega menu design! While Shopify doesn’t have that exact menu style out of the box, you can achieve something similar by:

  • Using a theme that supports mega menus (like Impulse, Prestige, or Streamline).

  • Installing an app such as Globo Mega Menu or Buddha Mega Menu if your theme doesn’t include it.

  • Or, if you want something fully custom, editing your theme’s code (Liquid/CSS) can replicate that same look.

It’s definitely possible to get very close to the screenshot you shared.

If you’d like step-by-step help or a custom setup, feel free to check my profile — I’ve added my WhatsApp link there for easier contact. Happy to walk you through it! :rocket:

Best,
Richaerd
Ecomerce Expert & Shopify partner