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

  <nav class="header__inline-menu">
<ul class="list-menu list-menu--inline" role="list">
{%- for link in section.settings.menu.links -%}
<li>
{%- if link.links != blank -%}
<div id="Details-HeaderMenu-{{ forloop.index }}">
<div id="menuDrawer" class="header__menu-item list-menu__item link focus-inset">
<span class="imageMenu" style="background-image: var(--image-{{forloop.index}})"></span>
<span {%- if link.child_active -%} class="header__active-menu-item"{%- endif -%}>{{ link.title | escape }} {% render 'icon-caret' %}</span>

<ul id="HeaderMenu-MenuList-{{ forloop.index }}" class="menuDrawerBox header__submenu list-menu list-menu--disclosure caption-large motion-reduce" role="list" tabindex="-1">
{%- for childlink in link.links -%}
<li>
{%- if childlink.links == blank -%}
<a href="{{ childlink.url }}" class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if childlink.current %} list-menu__item--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
{{ childlink.title | escape }}
</a>
{%- else -%}
<div id="Details-HeaderSubMenu-{{ forloop.index }}">
<div class="menuDrawerTitle header__menu-item link link--text list-menu__item focus-inset caption-large">
{{ childlink.title | escape }}
</div>
<ul id="HeaderMenu-SubMenuList-{{ forloop.index }}" class="menuDrawerSub header__submenu list-menu motion-reduce">
{%- for grandchildlink in childlink.links -%}
<li>
<a href="{{ grandchildlink.url }}" class="header__menu-item list-menu__item link link--text focus-inset caption-large"{% if grandchildlink.current %} aria-current="page"{% endif %}>
{{ grandchildlink.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
</div>

{%- else -%}
<a href="{{ link.url }}" class="header__menu-item header__menu-item list-menu__item link link--text focus-inset"{% if link.current %} aria-current="page"{% endif %}>
<span class="imageMenu" style="background-image: var(--image-{{forloop.index}})"></span>
<span {%- if link.current %} class="header__active-menu-item"{%- endif -%}>{{ link.title | escape }}</span>
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</nav>

<style>
:root {
{% for block in section.blocks %}
--image-{{forloop.index}} : url({{block.settings.a | img_url: "small" }});
{% endfor %}
}

.imageMenu {
width: 50px;
height: 50px;
margin-right: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border-radius: 50%;
background-color: {{section.settings.menu_icon_bg}};
}

.header__menu-item:hover .imageMenu {
background-color: {{section.settings.menu_icon_hover}};
}

.header__menu-item:hover {
background-color: {{section.settings.menu_icon_bg}};
}

#menuDrawer:hover .header__submenu {
display: flex !important;
}

#menuDrawer::before {
content: '';
position: absolute;
height: 100%;
padding-bottom: 100px;
width: 100%;
}

#menuDrawer {
position: relative;
}

.menuDrawerBox {
gap: 10px;
}

.header__submenu {
top: 70px;
display: none;
min-width: max-content !important;
width: max-content !important;
transition: all .5s ease;
animation: dropdown-menu .5s ease forwards;
}

.menuDrawerSub {
flex-direction: column;
}

.menuDrawerTitle {
font-weight: 600;
}

@keyframes dropdown-menu {
0%{
top: 25px;
opacity: 0;
}
100%{
top: 70px;
opacity: 1;
}
}

#menuDrawer > span > svg {
width: 15px;
}
</style>  

 

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

  ,{
"type": "header",
"content": "Menu icon / image settings"
},
{
"type": "color",
"id": "menu_icon_bg",
"label": "Icon background"
},
{
"type": "color",
"id": "menu_icon_hover",
"label": "Icon background hover"
}
],
"blocks": [
{
"name": "menu image",
"type": "menu_image",
"settings": [
{
"type": "image_picker",
"id": "a",
"label": "image"
}
]
}
]
}

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.

Copied!
Back to blog

Leave a comment