Edit search-bar location in mobile nav minimal theme

Solved
Highlighted
Explorer
78 7 12

Hey shopifies,

I want to have a more dominant position for my search bar on mobiles. So, I want to show the search-bar always visible on top.

Right now the search-bar is hidden in the hamburger menu, my page looks like this on mobile devices (before and after opening the menu):

before menubefore menuwith menu openwith menu open

In my mobile-nav.liquid file, the dropdown hamburger menu is structured as a <ul>. At the end of it, the search bar is added in a <li> and <div> object. Like this, just before closing the </ul>:

    <li class="mobile-nav__link">
      {% if section.settings.header_search_enable %}
        <div class="header-bar__module header-bar__search">
          {% include 'search-bar' with 'header' %}
        </div>
      {% endif %}
    </li>
  </ul>

If I put the code for including the search-bar above the <ul>, the looks like this:

<nav role="navigation">
    <li class="mobile-nav__link">
      {% if section.settings.header_search_enable %}
        <div class="header-bar__module header-bar__search">
          {% include 'search-bar' with 'header' %}
        </div>
      {% endif %}
    </li>
  <ul id="MobileNav" class="mobile-nav post-large--hide">

The design result is:

mobile before menumobile before menumobile menu openmobile menu openfull screenfull screen

So the problem is, it destroys my full screen view. In the header.liquid file, the mobile-nav menu gets imported:

{% include 'mobile-nav' with linklists[section.settings.nav_menu] %}

I can't find any value called "linklists" in the mobile-nav. How can this value be transferred then? Where is section.settings.nav.menu?

Can anybody help me how to avoid that the search-bar from the mobile-nav menu destroys my view in wide screen?

I appreciate any help very much!

Thank you!

I use minimal theme, my shop is menschenskinder-shop.de and still a password that is "vuffey".

0 Likes
Highlighted
Explorer
78 7 12

This is an accepted solution.

Solved it just 10 min later.

What I understood now when I wrote my post. I had some strange behaviour when I added predictive search, I checked for search bars in my theme, and found two, but just saw one on my page. I didn't really understand, but now it makes sense.

In the header.liquid the mobile-nav gets imported, but also the regular nav for the large menu. But they just hide the mobile-nav. I was blind after too much work on shopify today to see, but one of the classes for the <ul> element of my last post is "post-large--hide". So I just gave the <li> element, that I put above the <ul> the same class, et voilá, it works! Maybe someone can use this thread. It looks like this at the beginning of my mobile-nav (from line 2):

  <li class="mobile-nav__link post-large--hide">
      {% if section.settings.header_search_enable %}
        <div class="header-bar__module header-bar__search">
          {% include 'search-bar' with 'header' %}
        </div>
      {% endif %}
    </li>
0 Likes