Hello, I am using the dawn theme version 12.0, and I recently edited the header search icon code so that it appears as a full bar. The new full bar design looks great but only for desktop view. I’m wondering if it would be possible to keep the search bar as is for desktop view but to have it return back to a search icon for mobile view. Below I have attached a screenshot of my current header design as well as my header code.
{%- if settings.predictive_search_enabled -%} {%- endif -%} {%- if section.settings.menu_type_desktop == 'mega' -%} {{ 'component-mega-menu.css' | asset_url | stylesheet_tag }} {%- endif -%}
{%- if settings.cart_type == “drawer” -%}
{{ ‘component-cart-drawer.css’ | asset_url | stylesheet_tag }}
{{ ‘component-cart.css’ | asset_url | stylesheet_tag }}
{{ ‘component-totals.css’ | asset_url | stylesheet_tag }}
{{ ‘component-price.css’ | asset_url | stylesheet_tag }}
{{ ‘component-discounts.css’ | asset_url | stylesheet_tag }}
{%- endif -%}
{{ ‘component-list-menu.css’ | asset_url | stylesheet_tag }}
{{ ‘component-search.css’ | asset_url | stylesheet_tag }}
{{ ‘component-menu-drawer.css’ | asset_url | stylesheet_tag }}
{{ ‘component-cart-notification.css’ | asset_url | stylesheet_tag }}
{{ ‘component-cart-items.css’ | asset_url | stylesheet_tag }}
{%- style -%}
.header {
padding: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px 3rem {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px 3rem;
}
.section-header {
position: sticky; /* This is for fixing a Safari z-index issue. PR #2147 */
margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-header {
margin-bottom: {{ section.settings.margin_bottom }}px;
}
}
@media screen and (min-width: 990px) {
.header {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- if settings.cart_type == “drawer” -%}
{%- endif -%}
{%- liquid
for block in section.blocks
if block.type == ‘@app’
assign has_app_block = true
endif
endfor
-%}
<{% if section.settings.sticky_header_type != ‘none’ %}sticky-header data-sticky-type=“{{ section.settings.sticky_header_type }}”{% else %}div{% endif %} class=“header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper–border-bottom{% endif %}”>
{%- liquid
assign social_links = false
assign localization_forms = false
if settings.social_twitter_link != blank or settings.social_facebook_link != blank or settings.social_pinterest_link != blank or settings.social_instagram_link != blank or settings.social_youtube_link != blank or settings.social_vimeo_link != blank or settings.social_tiktok_link != blank or settings.social_tumblr_link != blank or settings.social_snapchat_link != blank
assign social_links = true
endif
if localization.available_countries.size > 1 and section.settings.enable_country_selector or section.settings.enable_language_selector and localization.available_languages.size > 1
assign localization_forms = true
endif
-%}
-%}
{%- if section.settings.logo_position != ‘middle-center’ -%}
{%- if request.page_type == ‘index’ -%}
{%- endif -%}
{%- if settings.logo != blank -%}
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
{% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %}
{% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
{{ settings.logo | image_url: width: 600 | image_tag:
class: 'header__heading-logo motion-reduce',
widths: widths,
height: logo_height,
width: settings.logo_width,
alt: logo_alt,
sizes: sizes,
preload: true
}}
{%- else -%}
{{ shop.name }}
{%- endif -%}
{%- if request.page_type == 'index' -%}
{%- endif -%}
{%- endif -%}
{%- liquid
if section.settings.menu != blank
if section.settings.menu_type_desktop == ‘dropdown’
render ‘header-dropdown-menu’
elsif section.settings.menu_type_desktop != ‘drawer’
render ‘header-mega-menu’
endif
endif
%}
{%- if section.settings.logo_position == ‘middle-center’ -%}
{%- if request.page_type == ‘index’ -%}
{%- endif -%}
{%- if settings.logo != blank -%}
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
{% capture sizes %}(min-width: 750px) {{ settings.logo_width }}px, 50vw{% endcapture %}
{% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
{{ settings.logo | image_url: width: 600 | image_tag:
class: 'header__heading-logo',
widths: widths,
height: logo_height,
width: settings.logo_width,
alt: logo_alt,
sizes: sizes,
preload: true
}}
{%- else -%}
{{ shop.name }}
{%- endif -%}
{%- if request.page_type == 'index' -%}
{%- endif -%}
{%- endif -%}
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
{{ 'localization.country_label' | t }}
{% render 'icon-caret' %}{{ 'localization.country_label' | t }}
{%- render 'country-localization', localPosition: 'HeaderCountry' -%}{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
{%- form ‘localization’, id: ‘HeaderLanguageMobileFormNoScript’, class: ‘localization-form’ -%}
{{ 'localization.language_label' | t }}
{% render 'icon-caret' %}{{ 'localization.language_label' | t }}
{%- render 'language-localization', localPosition: 'HeaderLanguage' -%}{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when ‘@app’ -%}
{% render block %}
{%- endcase -%}
{%- endfor -%}
{%- if settings.cart_type == “notification” -%}
{%- render ‘cart-notification’, color_scheme: section.settings.color_scheme, desktop_menu_type: section.settings.menu_type_desktop -%}
{%- endif -%}
{% javascript %}
class StickyHeader extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.header = document.querySelector(‘.section-header’);
this.headerIsAlwaysSticky = this.getAttribute(‘data-sticky-type’) === ‘always’ || this.getAttribute(‘data-sticky-type’) === ‘reduce-logo-size’;
this.headerBounds = {};
this.setHeaderHeight();
window.matchMedia(‘(max-width: 990px)’).addEventListener(‘change’, this.setHeaderHeight.bind(this));
if (this.headerIsAlwaysSticky) {
this.header.classList.add(‘shopify-section-header-sticky’);
};
this.currentScrollTop = 0;
this.preventReveal = false;
this.predictiveSearch = this.querySelector(‘predictive-search’);
this.onScrollHandler = this.onScroll.bind(this);
this.hideHeaderOnScrollUp = () => this.preventReveal = true;
this.addEventListener(‘preventHeaderReveal’, this.hideHeaderOnScrollUp);
window.addEventListener(‘scroll’, this.onScrollHandler, false);
this.createObserver();
}
setHeaderHeight() {
document.documentElement.style.setProperty(‘–header-height’, ${this.header.offsetHeight}px);
}
disconnectedCallback() {
this.removeEventListener(‘preventHeaderReveal’, this.hideHeaderOnScrollUp);
window.removeEventListener(‘scroll’, this.onScrollHandler);
}
createObserver() {
let observer = new IntersectionObserver((entries, observer) => {
this.headerBounds = entries[0].intersectionRect;
observer.disconnect();
});
observer.observe(this.header);
}
onScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (this.predictiveSearch && this.predictiveSearch.isOpen) return;
if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
this.header.classList.add(‘scrolled-past-header’);
if (this.preventHide) return;
requestAnimationFrame(this.hide.bind(this));
} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
this.header.classList.add(‘scrolled-past-header’);
if (!this.preventReveal) {
requestAnimationFrame(this.reveal.bind(this));
} else {
window.clearTimeout(this.isScrolling);
this.isScrolling = setTimeout(() => {
this.preventReveal = false;
}, 66);
requestAnimationFrame(this.hide.bind(this));
}
} else if (scrollTop <= this.headerBounds.top) {
this.header.classList.remove(‘scrolled-past-header’);
requestAnimationFrame(this.reset.bind(this));
}
this.currentScrollTop = scrollTop;
}
hide() {
if (this.headerIsAlwaysSticky) return;
this.header.classList.add(‘shopify-section-header-hidden’, ‘shopify-section-header-sticky’);
this.closeMenuDisclosure();
this.closeSearchModal();
}
reveal() {
if (this.headerIsAlwaysSticky) return;
this.header.classList.add(‘shopify-section-header-sticky’, ‘animate’);
this.header.classList.remove(‘shopify-section-header-hidden’);
}
reset() {
if (this.headerIsAlwaysSticky) return;
this.header.classList.remove(‘shopify-section-header-hidden’, ‘shopify-section-header-sticky’, ‘animate’);
}
closeMenuDisclosure() {
this.disclosures = this.disclosures || this.header.querySelectorAll(‘header-menu’);
this.disclosures.forEach(disclosure => disclosure.close());
}
closeSearchModal() {
this.searchModal = this.searchModal || this.header.querySelector(‘details-modal’);
this.searchModal.close(false);
}
}
customElements.define(‘sticky-header’, StickyHeader);
{% endjavascript %}
{%- if request.page_type == ‘index’ -%}
{% assign potential_action_target = request.origin | append: routes.search_url | append: “?q={search_term_string}” %}
{%- endif -%}
{% schema %}
{
“name”: “t:sections.header.name”,
“class”: “section-header”,
“max_blocks”: 3,
“settings”: [
{
“type”: “select”,
“id”: “logo_position”,
“options”: [
{
“value”: “top-left”,
“label”: “t:sections.header.settings.logo_position.options__2.label”
},
{
“value”: “top-center”,
“label”: “t:sections.header.settings.logo_position.options__3.label”
},
{
“value”: “middle-left”,
“label”: “t:sections.header.settings.logo_position.options__1.label”
},
{
“value”: “middle-center”,
“label”: “t:sections.header.settings.logo_position.options__4.label”
}
],
“default”: “middle-left”,
“label”: “t:sections.header.settings.logo_position.label”,
“info”: “t:sections.header.settings.logo_help.content”
},
{
“type”: “link_list”,
“id”: “menu”,
“default”: “main-menu”,
“label”: “t:sections.header.settings.menu.label”
},
{
“type”: “select”,
“id”: “menu_type_desktop”,
“options”: [
{
“value”: “dropdown”,
“label”: “t:sections.header.settings.menu_type_desktop.options__1.label”
},
{
“value”: “mega”,
“label”: “t:sections.header.settings.menu_type_desktop.options__2.label”
},
{
“value”: “drawer”,
“label”: “t:sections.header.settings.menu_type_desktop.options__3.label”
}
],
“default”: “dropdown”,
“label”: “t:sections.header.settings.menu_type_desktop.label”,
“info”: “t:sections.header.settings.menu_type_desktop.info”
},
{
“type”: “select”,
“id”: “sticky_header_type”,
“options”: [
{
“value”: “none”,
“label”: “t:sections.header.settings.sticky_header_type.options__1.label”
},
{
“value”: “on-scroll-up”,
“label”: “t:sections.header.settings.sticky_header_type.options__2.label”
},
{
“value”: “always”,
“label”: “t:sections.header.settings.sticky_header_type.options__3.label”
},
{
“value”: “reduce-logo-size”,
“label”: “t:sections.header.settings.sticky_header_type.options__4.label”
}
],
“default”: “on-scroll-up”,
“label”: “t:sections.header.settings.sticky_header_type.label”
},
{
“type”: “checkbox”,
“id”: “show_line_separator”,
“default”: true,
“label”: “t:sections.header.settings.show_line_separator.label”
},
{
“type”: “header”,
“content”: “t:sections.header.settings.header__1.content”
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“default”: “background-1”
},
{
“type”: “color_scheme”,
“id”: “menu_color_scheme”,
“label”: “t:sections.header.settings.menu_color_scheme.label”,
“default”: “background-1”
},
{
“type”: “header”,
“content”: “t:sections.header.settings.header__3.content”,
“info”: “t:sections.header.settings.header__4.info”
},
{
“type”: “checkbox”,
“id”: “enable_country_selector”,
“default”: false,
“label”: “t:sections.header.settings.enable_country_selector.label”
},
{
“type”: “header”,
“content”: “t:sections.header.settings.header__5.content”,
“info”: “t:sections.header.settings.header__6.info”
},
{
“type”: “checkbox”,
“id”: “enable_language_selector”,
“default”: false,
“label”: “t:sections.header.settings.enable_language_selector.label”
},
{
“type”: “header”,
“content”: “t:sections.header.settings.mobile_layout.content”
},
{
“type”: “select”,
“id”: “mobile_logo_position”,
“options”: [
{
“value”: “center”,
“label”: “t:sections.header.settings.mobile_logo_position.options__1.label”
},
{
“value”: “left”,
“label”: “t:sections.header.settings.mobile_logo_position.options__2.label”
}
],
“default”: “center”,
“label”: “t:sections.header.settings.mobile_logo_position.label”
},
{
“type”: “header”,
“content”: “t:sections.all.spacing”
},
{
“type”: “range”,
“id”: “margin_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.header.settings.margin_bottom.label”,
“default”: 0
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 36,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 20
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 36,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 20
}
],
“blocks”: [
{
“type”: “@app”
}
]
}
{% endschema %}