Search bar always open on mobile (Flex Theme-Out of the Sandbox)

Highlighted
Shopify Partner
14 0 2

Hello, i purchased Flex Theme from https://outofthesandbox.com/products/flex-theme , which is a great theme with lots of features but i have one small issue. How do i make the search bar always open on mobile? I am able to display the logo  below header on mobile and that gives me plenty of space to display the search bar always open. Can someone advise?

Here's a link to my site https://scarlatti-ice.com  The picture attached is an example of what i want. Thank you all

 

 

I want the bar to be always open like the screenshot below.Screenshot 2019-11-29 at 19.56.21.png

 

My guess is that this can be done from Snippets>>Mobile Header where i have the following code 

 

{% comment %} Is the color set to transparent? {% endcomment %}
{%- assign mobile_menu_background_color = settings.mobile_menu_background_color | color_extract: 'alpha' -%}
{%- assign mobile_menu_link_color = settings.mobile_menu_link_color | color_extract: 'alpha' -%}
{%- assign mobile_menu_link_hover_color = settings.mobile_menu_link_hover_color | color_extract: 'alpha' -%}

{% comment %} Opacity level {% endcomment %}
{%- assign mobile_menu_opacity = settings.mobile_menu_opacity | divided_by: 100.00 -%}

{% comment %} Mobile specific CSS {% endcomment %}
{%- style -%}
.mobile-menu {
background-color: {% if mobile_menu_background_color != 0.0 %}{{ settings.mobile_menu_background_color | color_modify: 'alpha', mobile_menu_opacity }}{% else %}{{ settings.header_background | color_modify: 'alpha', mobile_menu_opacity }}{% endif %};
}

{%- if mobile_menu_link_color != 0.0 -%}
.mobile-menu-link,
.mobile-menu__item,
.mobile-menu a {
color: {{ settings.mobile_menu_link_color }};
}
{%- endif -%}

{%- if mobile_menu_link_hover_color != 0.0 -%}
.mobile-menu-link:hover,
.mobile-menu__item:hover,
.mobile-menu a:hover {
color: {{ settings.mobile_menu_link_hover_color }};
}
{%- endif -%}
{%- endstyle -%}

{% comment %} HTML markup {% endcomment %}
<div id="mobile-header" class="mobile-header">
<div data-show-mobile-menu="false" class="mobile-menu__toggle-button mobile-toggle__position--{{ settings.logo_menu_position }}">
</div>
<div class="mobile-header__content
mobile-layout--{{ settings.logo_menu_position }}
mobile-logo__position--{{ settings.logo_mobile_position }}
header__icon-style-{{ settings.icon_style | replace: '_', '-' }}">
<div class="mobile-dropdown mobile-dropdown__position--{{ settings.logo_menu_position }}">
<div class="mobile-menu__toggle-icon">
<div class="mobile-header__open-menu">
{% include settings.icon, name: 'menu' %}
</div>
<div class="mobile-header__close-menu">
{% include settings.icon, name: 'x' %}
</div>
</div>
{% include 'mobile-menu', nav_blocks: header_blocks %}
</div>
<div class="mobile-logo">
{% if settings.logo_mobile != blank %}
<a class="mobile-header__logo header__link primary-logo" href="{{ shop.url }}" title="{{ shop.name }}">
{% include 'image-element', image: settings.logo_mobile, alt: settings.logo_mobile.alt, additional_classes: 'primary-logo' %}
</a>
{% elsif section.settings.logo != blank %}
<a class="mobile-header__logo header__link primary-logo" href="{{ shop.url }}" title="{{ shop.name }}">
{% include 'image-element', image: section.settings.logo, alt: section.settings.logo.alt, additional_classes: 'primary-logo' %}
</a>
{% else %}
<a href="{{ shop.url }}" class="header__link header__logo-text primary-brand">
<span>{{ shop.name }}</span>
</a>
{% endif %}
</div>


<div class="mobile-icons {% if settings.show_search_icon_mobile == false %}has-one-icon{% endif %}">
{% if settings.show_search_icon_mobile %}
{% comment %} Search icon {% endcomment %}
<a class="header__link action-area__link" data-show-search-trigger>
{% include settings.icon, name: 'search', icon_class: 'header__icon' %}
<span class="icon-caption">{{ 'general.search.title' | t | escape }}</span>

</a>
{% endif %}

{% comment %} Cart icon {% endcomment %}
<div class="header-cart action-area__link {% if cart.item_count != 0 %}has-cart-count{% endif %}" data-ajax-cart-trigger>
<a class="header__link" {% if settings.cart_action != 'mini_cart' or settings.cart_action != 'drawer' %}href="/cart"{% endif %} >
<span class="header-cart__icon">
{% include settings.icon, name: settings.cart_icon, icon_class: 'header__icon' %}
<span class="header-cart__count header-cart__count--badge badge" data-bind="itemCount">
{{ cart.item_count }}
</span>
</span>
<span class="header-cart__caption icon-caption">
{{ 'layout.general.cart' | t | escape }}
{%- if object.settings.icon_style == 'text' -%}
<span class="header-cart__count cart__count--text" data-bind="itemCount">{{ cart.item_count }}</span>
{%- endif -%}
</span>
</a>
{% if settings.cart_action == 'mini_cart' or settings.cart_action == 'drawer' %}
{% include 'ajax-cart', context: 'mobile-header' %}
{% endif %}
</div>

</div>
</div>

{% if settings.logo_mobile_position == 'below' %}
<div class="mobile-logo__outer">
{% if settings.logo_mobile != blank %}
<a class="mobile-header__logo header__link primary-logo" href="{{ shop.url }}" title="{{ shop.name }}">
{% include 'image-element', image: settings.logo_mobile, alt: settings.logo_mobile.alt, additional_classes: 'primary-logo' %}
</a>
{% else %}
<a href="{{ shop.url }}" class="header__link header__logo-text primary-brand">
{{ shop.name }}
</a>
{% endif %}
</div>
{% endif %}

</div>

 

0 Likes