Moving the search bar to the navigation menu - Minimal theme

[VictorSaneFood]

Hi, Shopify community!

I've searched far and wide for the possibility of moving my search bar (upper left) to be a part of the navigation menu. I know that you can make the search function af part of the menu through shopify, but I want the whole bar to be a part of it, not a link. 

Is this possible? 

Thanks in advance,

Victor

Info: 
website:  sanefooddk.myshopify.com

pw: wiakre

[Biterscode]

HI Victor

Yes you can move search bar to navigation menu 

Simply put below code after navigation loop in your snippet.

<li>
<div class="header-bar__module header-bar__search">
<form action="/search" method="get" class="header-bar__search-form clearfix" role="search">
<button type="submit" class="btn btn--search icon-fallback-text header-bar__search-submit">
<span class="icon icon-search" aria-hidden="true"></span>
<span class="fallback-text">Søg</span>
</button>
<input type="search" name="q" value="" aria-label="Søg" class="header-bar__search-input" placeholder="Søg">
</form>
</div>
</li>

[VictorSaneFood]

Hey Biterscode!

Thanks a lot, it seems to do the trick BUT I can't position the search correctly. 

I'm working in site-nav.liquid under Snippets. I want the search bar to be on the far left next to "Kontakt os". 

/Victor

[Biterscode]

Upload your file here so i will send you updated file.

[VictorSaneFood]

{% comment %}
List out your main-menu linklist (default)

More info on linklists:
- http://docs.shopify.com/themes/liquid-variables/linklists
{% endcomment %}
<nav>
<ul class="site-nav" id="AccessibleNav">
{% for link in site-nav.links %}
{% if link.links != blank %}
{% assign parent_index = forloop.index %}
<li
class="site-nav--has-dropdown {% if link.active %}site-nav--active{% endif %}"
aria-haspopup="true">
<a
href="{{ link.url }}"
class="site-nav__link"
data-meganav-type="parent"
aria-controls="MenuParent-{{ parent_index }}"
aria-expanded="false"
{% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
{{ link.title | escape }}
<span class="icon icon-arrow-down" aria-hidden="true"></span>
</a>
<ul
id="MenuParent-{{ parent_index }}"
class="site-nav__dropdown {% if link.levels == 2 %}site-nav--has-grandchildren{% endif %}"
data-meganav-dropdown>
{% for childlink in link.links %}
{% if childlink.links != blank %}
{% assign child_index = forloop.index %}
<li
class="site-nav--has-dropdown site-nav--has-dropdown-grandchild {% if childlink.active %}site-nav--active{% endif %}"
aria-haspopup="true">
<a
href="{{ childlink.url }}"
class="site-nav__link"
aria-controls="MenuChildren-{{ parent_index }}-{{ child_index }}"
data-meganav-type="parent"
{% unless request.page_type == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}
tabindex="-1">
{{ childlink.title | escape }}
<span class="icon icon-arrow-down" aria-hidden="true"></span>
</a>
<ul
id="MenuChildren-{{ parent_index }}-{{ child_index }}"
class="site-nav__dropdown-grandchild"
data-meganav-dropdown>
{% for grandchildlink in childlink.links %}
<li{% if grandchildlink.active %} class="site-nav--active"{% endif %}>
<a
href="{{ grandchildlink.url }}"
class="site-nav__link"
data-meganav-type="child"
{% unless request.page_type == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless %}
tabindex="-1">
{{ grandchildlink.title | escape }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li{% if childlink.active %} class="site-nav--active"{% endif %}>
<a
href="{{ childlink.url }}"
class="site-nav__link"
data-meganav-type="child"
{% if childlink.active %}aria-current="page"{% endif %}
tabindex="-1">
{{ childlink.title | escape }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<li{% if link.active %} class="site-nav--active"{% endif %}>
<a
href="{{ link.url }}"
class="site-nav__link"
data-meganav-type="child"
{% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
{{ link.title | escape }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</nav>

Thanks!

[VictorSaneFood]

{% comment %}
  List out your main-menu linklist (default)

  More info on linklists:
    - http://docs.shopify.com/themes/liquid-variables/linklists
{% endcomment %}
<nav>
  <ul class="site-nav" id="AccessibleNav">
    {% for link in site-nav.links %}
      {% if link.links != blank %}
      {% assign parent_index = forloop.index %}
        <li
          class="site-nav--has-dropdown {% if link.active %}site-nav--active{% endif %}"
          aria-haspopup="true">
          <a
            href="{{ link.url }}"
            class="site-nav__link"
            data-meganav-type="parent"
            aria-controls="MenuParent-{{ parent_index }}"
            aria-expanded="false"
            {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
              {{ link.title | escape }}
              <span class="icon icon-arrow-down" aria-hidden="true"></span>
          </a>
          <ul
            id="MenuParent-{{ parent_index }}"
            class="site-nav__dropdown {% if link.levels == 2 %}site-nav--has-grandchildren{% endif %}"
            data-meganav-dropdown>
            {% for childlink in link.links %}
              {% if childlink.links != blank %}
              {% assign child_index = forloop.index %}
                <li
                  class="site-nav--has-dropdown site-nav--has-dropdown-grandchild {% if childlink.active %}site-nav--active{% endif %}"
                  aria-haspopup="true">
                  <a
                    href="{{ childlink.url }}"
                    class="site-nav__link"
                    aria-controls="MenuChildren-{{ parent_index }}-{{ child_index }}"
                    data-meganav-type="parent"
                    {% unless request.page_type == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}
                    tabindex="-1">
                      {{ childlink.title | escape }}
                      <span class="icon icon-arrow-down" aria-hidden="true"></span>
                  </a>
                  <ul
                    id="MenuChildren-{{ parent_index }}-{{ child_index }}"
                    class="site-nav__dropdown-grandchild"
                    data-meganav-dropdown>
                    {% for grandchildlink in childlink.links %}
                      <li{% if grandchildlink.active %} class="site-nav--active"{% endif %}>
                        <a
                          href="{{ grandchildlink.url }}"
                          class="site-nav__link"
                          data-meganav-type="child"
                          {% unless request.page_type == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless %}
                          tabindex="-1">
                            {{ grandchildlink.title | escape }}
                          </a>
                      </li>
                    {% endfor %}
                  </ul>
                </li>
              {% else %}
                <li{% if childlink.active %} class="site-nav--active"{% endif %}>
                  <a
                    href="{{ childlink.url }}"
                    class="site-nav__link"
                    data-meganav-type="child"
                    {% if childlink.active %}aria-current="page"{% endif %}
                    tabindex="-1">
                      {{ childlink.title | escape }}
                  </a>
                </li>
              {% endif %}
            {% endfor %}
          </ul>
        </li>
      {% else %}
        <li{% if link.active %} class="site-nav--active"{% endif %}>
          <a
            href="{{ link.url }}"
            class="site-nav__link"
            data-meganav-type="child"
            {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
              {{ link.title | escape }}
          </a>
        </li>
      {% endif %}
    {% endfor %}
  </ul>
</nav>

[Biterscode · Accepted solution]

<li>

<div class="header-bar__module header-bar__search">

<form action="/search" method="get" class="header-bar__search-form clearfix" role="search">

<button type="submit" class="btn btn--search icon-fallback-text header-bar__search-submit">

<span class="icon icon-search" aria-hidden="true"></span>

<span class="fallback-text">Søg</span>

</button>

<input type="search" name="q" value="" aria-label="Søg" class="header-bar__search-input" placeholder="Søg">

</form>

</div> 

</li>

{% comment %}

  List out your main-menu linklist (default)

  More info on linklists:

    - http://docs.shopify.com/themes/liquid-variables/linklists

{% endcomment %}

<nav>

  <ul class="site-nav" id="AccessibleNav">

    {% for link in site-nav.links %}

      {% if link.links != blank %}

      {% assign parent_index = forloop.index %}

        <li

          class="site-nav--has-dropdown {% if link.active %}site-nav--active{% endif %}"

          aria-haspopup="true">

          <a

            href="{{ link.url }}"

            class="site-nav__link"

            data-meganav-type="parent"

            aria-controls="MenuParent-{{ parent_index }}"

            aria-expanded="false"

            {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>

              {{ link.title | escape }}

              <span class="icon icon-arrow-down" aria-hidden="true"></span>

          </a>

          <ul

            id="MenuParent-{{ parent_index }}"

            class="site-nav__dropdown {% if link.levels == 2 %}site-nav--has-grandchildren{% endif %}"

            data-meganav-dropdown>

            {% for childlink in link.links %}

              {% if childlink.links != blank %}

              {% assign child_index = forloop.index %}

                <li

                  class="site-nav--has-dropdown site-nav--has-dropdown-grandchild {% if childlink.active %}site-nav--active{% endif %}"

                  aria-haspopup="true">

                  <a

                    href="{{ childlink.url }}"

                    class="site-nav__link"

                    aria-controls="MenuChildren-{{ parent_index }}-{{ child_index }}"

                    data-meganav-type="parent"

                    {% unless request.page_type == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}

                    tabindex="-1">

                      {{ childlink.title | escape }}

                      <span class="icon icon-arrow-down" aria-hidden="true"></span>

                  </a>

                  <ul

                    id="MenuChildren-{{ parent_index }}-{{ child_index }}"

                    class="site-nav__dropdown-grandchild"

                    data-meganav-dropdown>

                    {% for grandchildlink in childlink.links %}

                      <li{% if grandchildlink.active %} class="site-nav--active"{% endif %}>

                        <a

                          href="{{ grandchildlink.url }}"

                          class="site-nav__link"

                          data-meganav-type="child"

                          {% unless request.page_type == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless %}

                          tabindex="-1">

                            {{ grandchildlink.title | escape }}

                          </a>

                      </li>

                    {% endfor %}

                  </ul>

                </li>

              {% else %}

                <li{% if childlink.active %} class="site-nav--active"{% endif %}>

                  <a

                    href="{{ childlink.url }}"

                    class="site-nav__link"

                    data-meganav-type="child"

                    {% if childlink.active %}aria-current="page"{% endif %}

                    tabindex="-1">

                      {{ childlink.title | escape }}

                  </a>

                </li>

              {% endif %}

            {% endfor %}

          </ul>

        </li>

      {% else %}

        <li{% if link.active %} class="site-nav--active"{% endif %}>

          <a

            href="{{ link.url }}"

            class="site-nav__link"

            data-meganav-type="child"

            {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>

              {{ link.title | escape }}

          </a>

        </li>

      {% endif %}

    {% endfor %}

    <li>

    <div class="header-bar__module header-bar__search" style="">
<form action="/search" method="get" class="header-bar__search-form clearfix" role="search">
<button type="submit" class="btn btn--search icon-fallback-text header-bar__search-submit">
<span class="icon icon-search" aria-hidden="true"></span>
<span class="fallback-text">Søg</span>
</button>
<input type="search" name="q" value="" aria-label="Søg" class="header-bar__search-input" placeholder="Søg" style="
border: 1px solid;
">
</form>
</div>

    </li>

  </ul>

</nav>

[VictorSaneFood]

Lovely! Thank you very very much, you really saved me from a headache! 

I wish you the very best, thanks a bunch bud! 

Best regards,

Victor

[earthtoplanet]

Hi @Biterscode,

Theme: Minimal
Site: www.earthtoplanet.com

I found this thread of yours from March and am trying to achieve a similar goal of moving the search field into the main nav. Following your instructions, I was able to get the search field into the main nav, but I have not been able to figure out how to get the search bar to stay on the far left side of the page, just like it is at the top of the page:

Would you mind taking a look to see what I can do to get the search field to the left side of the main nav bar?

This is from Snippets/site-nav.liquid:

{% comment %}
  List out your main-menu linklist (default)

  More info on linklists:
    - http://docs.shopify.com/themes/liquid-variables/linklists
{% endcomment %}
<nav>
  <ul class="site-nav" id="AccessibleNav">
    
{% comment %}
  Nov 12 2021 JZ: Trying to move search functionality into the main nav. However, I still need to get it to stay to the left just like it does at the top of the site.
{% endcomment %}    
    
        <li>
<div class="header-bar__module header-bar__search">
<form action="/search" method="get" class="header-bar__search-form clearfix" role="search">
<button type="submit" class="btn btn--search icon-fallback-text header-bar__search-submit">
<span class="icon icon-search" aria-hidden="true"></span>
<span class="fallback-text">Search</span>
</button>
<input type="search" name="q" value="" aria-label="Search" class="header-bar__search-input" placeholder="Search">
</form>
</div> 
</li>  
    
    {% for link in site-nav.links %}
      {% if link.links != blank %}
      {% assign parent_index = forloop.index %}    
        <li
          class="site-nav--has-dropdown {% if link.active %}site-nav--active{% endif %}"
          aria-haspopup="true">
          <a
            href="{{ link.url }}"
            class="site-nav__link"
            data-meganav-type="parent"
            aria-controls="MenuParent-{{ parent_index }}"
            aria-expanded="false"
            {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
              {{ link.title | escape }}
              <span class="icon icon-arrow-down" aria-hidden="true"></span>
          </a>
          <ul
            id="MenuParent-{{ parent_index }}"
            class="site-nav__dropdown {% if link.levels == 2 %}site-nav--has-grandchildren{% endif %}"
            data-meganav-dropdown>
            {% for childlink in link.links %}
              {% if childlink.links != blank %}
              {% assign child_index = forloop.index %}
                <li
                  class="site-nav--has-dropdown site-nav--has-dropdown-grandchild {% if childlink.active %}site-nav--active{% endif %}"
                  aria-haspopup="true">
                  <a
                    href="{{ childlink.url }}"
                    class="site-nav__link"
                    aria-controls="MenuChildren-{{ parent_index }}-{{ child_index }}"
                    data-meganav-type="parent"
                    {% unless request.page_type == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}
                    tabindex="-1">
                      {{ childlink.title | escape }}
                      <span class="icon icon-arrow-down" aria-hidden="true"></span>
                  </a>
                  <ul
                    id="MenuChildren-{{ parent_index }}-{{ child_index }}"
                    class="site-nav__dropdown-grandchild"
                    data-meganav-dropdown>
                    {% for grandchildlink in childlink.links %}
                      <li{% if grandchildlink.active %} class="site-nav--active"{% endif %}>
                        <a
                          href="{{ grandchildlink.url }}"
                          class="site-nav__link"
                          data-meganav-type="child"
                          {% unless request.page_type == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless %}
                          tabindex="-1">
                            {{ grandchildlink.title | escape }}
                          </a>
                      </li>
                    {% endfor %}
                  </ul>
                </li>
              {% else %}
                <li{% if childlink.active %} class="site-nav--active"{% endif %}>
                  <a
                    href="{{ childlink.url }}"
                    class="site-nav__link"
                    data-meganav-type="child"
                    {% if childlink.active %}aria-current="page"{% endif %}
                    tabindex="-1">
                      {{ childlink.title | escape }}
                  </a>
                </li>
              {% endif %}
            {% endfor %}
          </ul>
        </li>
      {% else %}
        <li{% if link.active %} class="site-nav--active"{% endif %}>
          <a
            href="{{ link.url }}"
            class="site-nav__link"
            data-meganav-type="child"
            {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
              {{ link.title | escape }}
          </a>
        </li>
      {% endif %}
    {% endfor %}
    
    
  </ul>
</nav>

[June_21]

I'm having the same issues, not sure how to update this.