Header customization

Store Design
, , , , , , , , ,
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,