How do I add 2 clickable images next to each other in Dawn mega menu?

[ac80]

Hey, I want to add 2 clickable images next to each other in Dawn mega menu? Is there any easy way to do this? Thanks

[EBOOST]

Hi @ac80 ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Sections/header.liquid
3. Add code below like the screenshot

    {
      "type": "menu",
      "name": "Menu",
      "settings": [
        {
          "type": "image_picker",
          "id": "menu_img",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "link_image",
          "label": "Link"
        },
        {
          "type": "url",
          "id": "link_top",
          "label": "Top Link"
        }
      ]
    },
    

4. snippets/header-mega-menu.liquid replace code below

{% comment %}
  Renders a megamenu for the header.

  Usage:
  {% render 'header-mega-menu' %}
{% endcomment %}

<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 -%}
          <header-menu>
            <details id="Details-HeaderMenu-{{ forloop.index }}" class="mega-menu">
              <summary
                id="HeaderMenu-{{ link.handle }}"
                class="header__menu-item list-menu__item link focus-inset"
              >
                <span
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                  {{- link.title | escape -}}
                </span>
                {% render 'icon-caret' %}
              </summary>
              <div
                id="MegaMenu-Content-{{ forloop.index }}"
                class="mega-menu__content color-{{ section.settings.menu_color_scheme }} gradient motion-reduce global-settings-popup"
                tabindex="-1"
              >
                <ul
                  class="mega-menu__list page-width{% if link.levels == 1 %} mega-menu__list--condensed{% endif %}"
                  role="list"
                >
                  {%- for childlink in link.links -%}
                    <li>
                      <a
                        id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
                        href="{{ childlink.url }}"
                        class="mega-menu__link mega-menu__link--level-2 link{% if childlink.current %} mega-menu__link--active{% endif %}"
                        {% if childlink.current %}
                          aria-current="page"
                        {% endif %}
                      >
                        {{ childlink.title | escape }}
                      </a>
                      {%- if childlink.links != blank -%}
                        <ul class="list-unstyled" role="list">
                          {%- for grandchildlink in childlink.links -%}
                            {%- assign show_link  = true -%}
                            {%- if grandchildlink.type == 'collection_link' -%}
                              {%- assign coll = collections[grandchildlink.handle] -%}
                              {%- if coll.all_products_count > 0 -%}
                                 {%- assign show_link  = false -%}
                              {%-  endif -%}
                            {%-  endif -%}
                            {%-  if show_link == true -%}
                              <li>
                                <a
                                  id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                                  href="{{ grandchildlink.url }}"
                                  class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"
                                  {% if grandchildlink.current %}
                                    aria-current="page"
                                  {% endif %}
                                >
                                
                                  {{ grandchildlink.title | escape }}
                                </a>
                              </li>
                            {%- endif -%}
                          {%- endfor -%}
                        </ul>
                      {%- endif -%}
                    </li>
                  {%- endfor -%}
                 
                  {% for block in section.blocks %}
                    {%  if block.type == 'menu' and block.settings.link_top  == link.url %}
                       <li class="menu-image">
                         {%  if block.settings.link_image != blank  and block.settings.link_image != menu_img %}
                           <a href="{{ block.settings.link_image }}">
                             {{
                              block.settings.menu_img
                              | image_url: width: 800
                              | image_tag: sizes: sizes, widths: '165, 360, 535, 750, 1070, 1500'
                            }}
                           </a>
                         {%  endif %}
                       </li>
                    {%  endif %}
                  {%  endfor %}
                </ul>
              </div>
            </details>
          </header-menu>
        {%- else -%}
          <a
            id="HeaderMenu-{{ link.handle }}"
            href="{{ link.url }}"
            class="header__menu-item list-menu__item link link--text focus-inset"
            {% if link.current %}
              aria-current="page"
            {% endif %}
          >
            <span
              {%- if link.current %}
                class="header__active-menu-item"
              {% endif %}
            >
              {{- link.title | escape -}}
            </span>
          </a>
        {%- endif -%}
      </li>
    {%- endfor -%}
  </ul>
</nav>
<style>
  .menu-image img {
    max-width: 100%; 
    height: auto;
  }
</style>

5. Go to customize to add image

[ac80]

Hey, thanks for getting back to me. I've installed the codes but when I go to customize,  my top links for the menu bar don't come up. I didn't have menu below the Header so I've added that in. Is there another step in Customization to get the to the navigation? Thanks

[EBOOST]

Hi,

I mean the link  in the top link have to match with link in the navigation

You can check link in the Navigation -> Menu

[ac80]

Ok, I got the image to show. Thank you, but it's at the bottom of the menu and it's massive. I want it much smaller like you example and to the right of the menu. How do I move and resize it? 

[EBOOST]

Hi,

You can add code below to bottom of Assets/base.css file

body .header--top-center .mega-menu__list {
flex-wrap: nowrap;
}

[ac80]

I still can't get it to work. Thanks anyway.

[EBOOST]

Hi,

Could you share your store url? I will help to check it.