Edit Drop Down menu to below header and linear rather than stacked

[nativesons]

we are attempting to clean up our drop down menu by making it originate from below the header rather than originating from the menu item, and we would like it to be a linear spread of the sub-menu items rather than stacked.

Example below:

 (https://proudmarycoffee.com/)

How would we edit the drop down to achieve something similar?

{% comment %}
Required values
index: <value>
______________
Optional values
prefix: <string>
{% endcomment %}

<input class="no-js-main-navigation" type="radio" id="dropdown-{{ link.title | handleize }}" name="no-js-main-navigation">
<div class="navbar-dropdown navbar-dropdown--{{ settings.dropdown_position }} is-{{ settings.dropdown_style }} has-{{ settings.dropdown_link_spacing }}-vertical-spacing">
  {% if settings.dropdown_style == 'horizontal' and settings.header_layout != 'vertical' %}
    <div class="section is-flex">
      {% for sub_link in link.links %}
        {%- comment %}<locksmith:c3dc>{% endcomment -%}
          {%- capture var %}{% render 'locksmith-variables', scope: 'subject', subject: sub_link, subject_parent: link, variable: 'transparent' %}{% endcapture %}{% if var == "true" %}{% else %}{% continue %}{% endif -%}
        {%- comment %}</locksmith:c3dc>{% endcomment -%}
        {% if sub_link.links == blank %}
          <div class="horizontal-dropdown__column">
            <a class="navbar-item {% if sub_link.active %}is-active{% endif %}" href="{{ sub_link.url }}">
              {{ sub_link.title }}
            </a>
          </div>
        {% else %}
          <div class="horizontal-dropdown__column has-submenu">
            <a href="{{ sub_link.url }}" class="navbar-item menu__heading {% if sub_link.active %}is-active{% endif %}">
              {{ sub_link.title }}
            </a>
            <ul class="navbar-submenu is-visible">
              {% for sub_sub_link in sub_link.links %}
                {%- comment %}<locksmith:22ac>{% endcomment -%}
                  {%- capture var %}{% render 'locksmith-variables', scope: 'subject', subject: sub_sub_link, subject_parent: sub_link, variable: 'transparent' %}{% endcapture %}{% if var == "true" %}{% else %}{% continue %}{% endif -%}
                {%- comment %}</locksmith:22ac>{% endcomment -%}
                <li>
                  <a class="navbar-item is-arrowless" href="{{ sub_sub_link.url }}">
                    {{ sub_sub_link.title }}
                  </a>
                </li>
              {% endfor %}
            </ul>
          </div>
        {% endif %}
      {% endfor %}
      </div>
    {% elsif settings.dropdown_style == 'vertical' or settings.header_layout == 'vertical' %}
      {%- comment %}<locksmith:db7d>{% endcomment -%}
        {%- assign locksmith_8d4f_forloop__size = 0 %}{% for sub_link in link.links %}{% capture var %}{% render 'locksmith-variables', scope: 'subject', subject: sub_link, subject_parent: link, variable: 'transparent' %}{% endcapture %}{% if var == 'true' %}{% assign locksmith_8d4f_forloop__size = locksmith_8d4f_forloop__size | plus: 1 %}{% endif %}{% endfor %}{% assign locksmith_8d4f_forloop__index = nil -%}
      {%- comment %}</locksmith:db7d>{% endcomment -%}
      {% for sub_link in link.links %}
        {%- comment %}<locksmith:0fa7>{% endcomment -%}
          {%- capture var %}{% render 'locksmith-variables', scope: 'subject', subject: sub_link, subject_parent: link, variable: 'transparent' %}{% endcapture %}{% if var == "true" %}{% if locksmith_8d4f_forloop__index == nil %}{% assign locksmith_8d4f_forloop__index = 1 %}{% assign locksmith_8d4f_forloop__index0 = 0 %}{% else %}{% assign locksmith_8d4f_forloop__index = locksmith_8d4f_forloop__index | plus: 1 %}{% assign locksmith_8d4f_forloop__index0 = locksmith_8d4f_forloop__index0 | plus: 1 %}{% endif %}{% if locksmith_8d4f_forloop__index == 1 %}{% assign locksmith_8d4f_forloop__first = true %}{% else %}{% assign locksmith_8d4f_forloop__first = false %}{% endif %}{% if locksmith_8d4f_forloop__index == locksmith_8d4f_forloop__size %}{% assign locksmith_8d4f_forloop__last = true %}{% else %}{% assign locksmith_8d4f_forloop__last = false %}{% endif %}{% assign locksmith_8d4f_forloop__rindex = locksmith_8d4f_forloop__size | minus: locksmith_8d4f_forloop__index | minus: 1 %}{% assign locksmith_8d4f_forloop__rindex0 = locksmith_8d4f_forloop__size | minus: locksmith_8d4f_forloop__index0 | minus: 1 %}{% else %}{% continue %}{% endif -%}
        {%- comment %}</locksmith:0fa7>{% endcomment -%}
        {% if sub_link.links == blank %}
          <a class="navbar-item {% if sub_link.active %}is-active{% endif %}" href="{{ sub_link.url }}">
            {{ sub_link.title }}
          </a>
        {% else %}
          <div class="has-submenu">
            <input class="visually-hidden" type="checkbox" id="{{ prefix }}submenu{% if block.id %}-{{ block.id }}{% endif %}-{{ index }}-{{ locksmith_8d4f_forloop__index }}" tabindex="-1">
            <label for="{{ prefix }}submenu{% if block.id %}-{{ block.id }}{% endif %}-{{ index }}-{{ locksmith_8d4f_forloop__index }}">
              {% if sub_link.url == 'http://' or sub_link.url == '' or sub_link.url == '/' or sub_link.url == 'https://' or sub_link.url == '#' %}
                <a class="navbar-link {% if sub_link.active %}is-active{% endif %}">
                  <span>{{ sub_link.title }}</span>
                </a>
              <span class="close-dropdown"></span>
              {% else %}
                <a href="{{ sub_link.url }}" class="navbar-link {% if sub_link.active %}is-active{% endif %}">
                  <span>{{ sub_link.title }}</span>
                </a>
                <span class="close-dropdown"></span>
              {% endif %}
            </label>
            <ul class="navbar-submenu">
              {% for sub_sub_link in sub_link.links %}
                {%- comment %}<locksmith:e64f>{% endcomment -%}
                  {%- capture var %}{% render 'locksmith-variables', scope: 'subject', subject: sub_sub_link, subject_parent: sub_link, variable: 'transparent' %}{% endcapture %}{% if var == "true" %}{% else %}{% continue %}{% endif -%}
                {%- comment %}</locksmith:e64f>{% endcomment -%}
                <li>
                  <a class="navbar-item" href="{{ sub_sub_link.url }}">{{ sub_sub_link.title }}</a>
                </li>
              {% endfor %}
            </ul>
          </div>
        {% endif %}
      {% endfor %}
    {% endif %}
</div>

Test site URL: https://native-sons-roasters-3430.myshopify.com/

Theme: Out of the Sandbox Flex

[parth_ghelani]

Hello @nativesons 

Can you please share by image that how would you like to show the submenu when open ?

So i can check and suggest you the best solution.

[nativesons]

Hi, Thanks for the help!

An example image is posted on the original message:

Along with a link (https://proudmarycoffee.com/) where you can see it in action. Was there another image you were needing?