Moving the search bar to the navigation menu - Minimal theme

Solved
VictorSaneFood
Excursionist
12 0 5

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

Accepted Solution (1)

Accepted Solutions
Biterscode
Excursionist
22 2 3

This is an 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:
{% 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>
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept the Solution.
Email: sandyhadiya@gmail.com Or WhatsApp Or Skype: sandip_php_7

View solution in original post

Replies 9 (9)
Biterscode
Excursionist
22 2 3

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>

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept the Solution.
Email: sandyhadiya@gmail.com Or WhatsApp Or Skype: sandip_php_7
VictorSaneFood
Excursionist
12 0 5

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
Excursionist
22 2 3

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

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept the Solution.
Email: sandyhadiya@gmail.com Or WhatsApp Or Skype: sandip_php_7
VictorSaneFood
Excursionist
12 0 5

{% 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
Excursionist
12 0 5
{% 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
Excursionist
22 2 3

This is an 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:
{% 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>
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept the Solution.
Email: sandyhadiya@gmail.com Or WhatsApp Or Skype: sandip_php_7

View solution in original post

VictorSaneFood
Excursionist
12 0 5

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
Tourist
31 5 2

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:

earthtoplanet_0-1636751914070.png

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
New Member
20 0 2

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