Hi,
May I ask for help on my dawn theme. I was able to make it long but when I use it via mobile I’m getting glitches. I got the code somewhere to make the search bar center + longer but it doesn’t appear to be “liquid” or “responsive”.
Code I used to center/make it long:
via base.css
header.header.header–top-left.header–mobile-center.page-width.header–has-menu.header–has-social.header–has-localizations {
display: flex;
flex-direction: column;
}
.search-modal__form, .search-modal__form > * {
width: 1100px !important;
}
Code I used to make it a search bar instead of search icon.
Via header.liquid
<style>
:root { --inputs-radius: 20px !important; }
.mobile-search { display: none; }
.desktop-search { display: block; }
@media only screen and (min-width: 769px) {
predictive-search[open] .predictive-search {
position: absolute;
min-width: 768px;
left: -768px;
transform: translateX(50%);
}
}
@media only screen and (max-width: 768px) {
.mobile-search { display: block; }
.desktop-search { display: none; }
}
</style>
<div class="mobile-search">
{% render 'header-search', input_id: 'Search-In-Modal' %}
</div>
<div class="desktop-search">
{%- if settings.predictive_search_enabled -%}
<predictive-search class="search-modal__form"
data-loading-text="{{ 'accessibility.loading' | t }}">
{%- else -%}
<search-form class="search-modal__form">
{%- endif -%}
<form action="{{ routes.search_url }}" method="get"
role="search" class="search search-modal__form">
<div class="field">
<input class="search__input field__input"
id="{{ input_id }}"
type="search"
name="q"
value="{{ search.terms | escape }}"
placeholder="{{ 'general.search.search' | t }}"
{%- if settings.predictive_search_enabled -%}
role="combobox"
aria-expanded="false"
aria-owns="predictive-search-results"
aria-controls="predictive-search-results"
aria-haspopup="listbox"
aria-autocomplete="list"
autocorrect="off"
autocomplete="off"
autocapitalize="off"
spellcheck="false"
{%- endif -%}
>
<label class="field__label"
for="{{ input_id }}">{{ 'general.search.search' | t }}</label>
<input type="hidden"
name="options[prefix]"
value="last">
<button type="reset"
class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}"
aria-label="{{ 'general.search.reset' | t }}">
<svg class="icon icon-close" aria-hidden="true" focusable="false">
<use xlink:href="#icon-reset"></use>
</svg>
</button>
<button class="search__button field__button"
aria-label="{{ 'general.search.search' | t }}">
<svg class="icon icon-search" aria-hidden="true" focusable="false">
<use href="#icon-search"></use>
</svg>
</button>
</div>
{%- if settings.predictive_search_enabled -%}
<div class="predictive-search predictive-search--header"
tabindex="-1"
data-predictive-search>
{%- render 'loading-spinner',
class: 'predictive-search__loading-state' -%}
</div>
<span class="predictive-search-status visually-hidden"
role="status"
aria-hidden="true"></span>
{%- endif -%}
</form>
{%- if settings.predictive_search_enabled -%}
</predictive-search>
{%- else -%}
</search-form>
{%- endif -%}
</div>
This is via desktop (1920x1080). I was hoping to have my logo a bit nearer with the search bar
and this is from the mobile device. The search bar doesn't appear to be liquid at all.