How can I add a hover dropdown menu to my online store?

Store Design
1

dustysaddle_0-1684720554478.png
dustysaddle_0-1684720554478.png1903×929 140 KB

Hi there, Shopify expert team.

Please help me in adding a hover drop down menu for my Shopify store website.
I’d like to make these hover drop down menus instead of having everything just there after clicking. So when the cursor hovers onto each one of menu, the options occur.
Ex: Complete Plastic Kit, the options drop down.

Thank you. A lot of help.

2

Hello @dustysaddle ,

You can try to follow these steps:

  • Go to Online Store → Themes → Actions → Edit code
  • Go to Sections → header.liquid
  • Link Hover.css: In the header file, find the section and add the following line of code to include the Hover.css library:
  • Modify the HTML structure: Inside the header file, find the HTML code that represents the menu or navigation items. Replace the existing code with the following structure as a starting point:

  - Menu 1
    

        - Submenu 1

        - Submenu 2
      
    
  

  - Menu 2
    

        - Submenu 1

        - Submenu 2
  • Apply Hover.css classes: Add the appropriate Hover.css classes to your menu and submenu items. For example, you can add the “hvr-underline-from-center” class to create an underline effect on hover. Here’s an example of how the modified HTML code might look:

  - Menu 1
    

        - Submenu 1

        - Submenu 2
      
    
  

  - Menu 2
    

        - Submenu 1

        - Submenu 2
  • Save changes

Hope this can help. Let us know if you need any further support.

Ali Reviews team.