Adding Dynamic Icon / Image Before Menu Title - Hover to Open

Adding Dynamic Icon / Image Before Menu Title - Hover to Open

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

I manage to write a code that can add an image of choice before the menu title without disrupting the menu list. No need to use javascript, just HTML and CSS.

I added the hover to open function as well. 

Check DEMO store here 💻. Password: made4uo

NOTE: Image must be a PNG with transparent background. Please refer to image below to have best results. This image only shows on desktop.

Image properties

To start:

1. Go to Online store > Themes > Actions > Edit code.

2. Open the Sections folder, and find the header.liquid. Inside the header liquid look for this piece of code "header__inline-menu." Use Ctrl + F to find inside the code editor. Replace the code with the code below. Please refer to image below on which code to delete. 

Code to delete



3. We need to add dynamic image, therefore we need a blocks for the image. Go all the way down to schema, and find the last "]." Replace the bracket with the code below. Please refer to the image below on which bracket to delete and replace. 

Replace last bracket


That's it (",). All you need to do is add your images, and change the settings in the header. Click the header, and you should see the  MENU ICON / IMAGE SETTINGS at the very bottom.

 Add the image / icon using the block according to the position in the menu. Drag to reposition.

Voltar para o blogue

Deixe um comentário