Header customization

Store Design
, , , , , , , , ,

Topic summary

A user wants to add a hover-activated dropdown menu (called a “MegaMenu”) to their Shopify store’s header navigation, specifically for the “Products” section. They’re using the Shopify Dawn theme and referencing the Motto/Retouch theme as their desired design.

Key Points:

  • The MegaMenu feature is not natively available in the Dawn theme
  • Multiple solutions were proposed:
    1. Switch to the same theme as the reference store (Motto)
    2. Hire a developer for custom coding
    3. Manually implement using provided HTML/CSS code

Technical Solution Provided:

  • Modify header.liquid file to add dropdown HTML structure
  • Add CSS styling for hover effects in theme stylesheet
  • Code snippets include navigation markup and positioning styles

Current Status:
The user found the reference theme but still struggles with implementation. One responder suggested contacting a Shopify partner for hands-on assistance with the custom code integration. The discussion remains open with the user seeking clearer instructions.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

IMG_6963.jpeg
IMG_6963.jpeg3024×4032 1.26 MB

JPEG-bilde.jpeg
JPEG-bilde.jpeg300×400 12.1 KB

Hi! I want to make a little customization on the headbar! I am currently using the same website! How can I make the “product” section on my website pop up when I position the mouse on it like on the picture 2?

1 Like
2

This is called MegaMenu which is unfortunately not available in Shopify Dawn theme. Would you like to share the reference store link so that I take a look and check which theme is used in the refence theme and suggest you same theme.

Here are the solutions.

  1. Either you need to use the same theme as per reference.
  2. Either you need to create it custom [via coding]. If you don’t know coding then I can assist with that.

So please share the reference store link.

Waiting for your reply.

Thanks

3

Hi @Vold

That is called Mega Menu Design for the drawer. If your theme dont have this features you need a developer to add this in your store.

4

Hi @Vold ,

Please apply the solution provided below.

Step-by-step: Add a Hover Dropdown for “Products”

  1. Locate Your Header Code
    Go to Shopify Admin > Online Store > Themes

Click “Actions” > “Edit Code” on your live or development theme

Open sections/header.liquid or snippets/header.liquid depending on your theme

  1. Wrap “Products” in a Hover Dropdown
    Example of HTML to add inside the navigation:
  • Products
    1. Add CSS for Hover Effect
      Go to your assets/theme.css or assets/base.css and add this:

    .nav-item {
    position: relative;
    }

    .dropdown-menu {
    display: none;
    position: absolute;
    background: white;
    top: 100%;
    left: 0;
    z-index: 999;
    padding: 10px;
    min-width: 150px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .nav-item:hover .dropdown-menu {
    display: block;
    }

    Hope this code will help to achieve the desired output.

    Regards,

    5

    https://themes.shopify.com/themes/motto/styles/retouch

    HI! thank you for your solution, I found the store theme on Shopify theme website, then I clicked on “try theme” - and tried to build my own store. But, as I said earlier I can’t figure out how to get that so called “mega menu”.

    6

    it was a bit hard to understand, do you have specific instructions on how to do it?

    Regards,

    7

    Hi @Vold ,

    I have given a step-by-step solution. If you need help implementing it, you can reach out to any Shopify partner for their expertise.

    Regards,