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.
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.
| <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.
| ,{ "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.