Positioning search text above the menu bar

FB6 · November 28, 2024, 2:27pm

How can I move the search text box above the menu bar? Is there a simple solution for non-coders? Thanks!

namphan · November 28, 2024, 4:03pm

Hi @FB6 ,

Please send the website link, I will check it for you

FB6 · December 3, 2024, 3:32pm

Hi Namphan,

thank your for the support! Here is the website link: Cioffi Importers PW: shawni

Regards,

Fabian

namphan · December 3, 2024, 3:39pm

Hi @FB6 ,

you want this:

please send me the code of header.liquid file, I will change and guide you

FB6 · December 3, 2024, 3:44pm

My god, rapid reponse time!

This is my code:

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

{%- if section.settings.menu_type_desktop == ‘mega’ -%}

{%- endif -%} header-drawer { justify-self: start; margin-left: -1.2rem; } {%- if section.settings.sticky_header_type == 'reduce-logo-size' -%} .scrolled-past-header .header__heading-logo-wrapper { width: 75%; } {%- endif -%} {%- if section.settings.menu_type_desktop != "drawer" -%} @media screen and (min-width: 990px) { header-drawer { display: none; } } {%- endif -%} .menu-drawer-container { display: flex; } .list-menu { list-style: none; padding: 0; margin: 0; } .list-menu--inline { display: inline-flex; flex-wrap: wrap; } summary.list-menu__item { padding-right: 2.7rem; } .list-menu__item { display: flex; align-items: center; line-height: calc(1 + 0.3 / var(--font-body-scale)); } .list-menu__item--link { text-decoration: none; padding-bottom: 1rem; padding-top: 1rem; line-height: calc(1 + 0.8 / var(--font-body-scale)); } @media screen and (min-width: 750px) { .list-menu__item--link { padding-bottom: 0.5rem; padding-top: 0.5rem; } }

{%- 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 -%}

{%- 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
-%}

{%- liquid
if section.settings.menu != blank
render ‘header-drawer’
endif

if section.settings.logo_position == ‘top-center’ or section.settings.menu == blank
render ‘header-search’, input_id: ‘Search-In-Modal-1’
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 section.settings.enable_country_selector and localization.available_countries.size > 1 -%} {%- form 'localization', id: 'HeaderCountryForm', class: 'localization-form' -%}

{%- render 'country-localization', localPosition: 'HeaderCountry' -%}

{%- endform -%} {% endif %}

{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}

{%- form ‘localization’, id: ‘HeaderLanguageForm’, class: ‘localization-form’ -%}

{%- render 'language-localization', localPosition: 'HeaderLanguage' -%}

{%- endform -%} {%- endif -%}

: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; } }

{% render 'header-search', input_id: 'Search-In-Modal' %}

{%- if settings.predictive_search_enabled -%} {%- else -%} {%- endif -%}

Search for products, categories, ...

{%- if settings.predictive_search_enabled -%}

{%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}

{%- endif -%} {%- if settings.predictive_search_enabled -%} {%- else -%} {%- endif -%}

{%- if shop.customer_accounts_enabled -%}

{%- if section.settings.enable_customer_avatar -%} {%- if customer and customer.has_avatar? -%} {{ customer | avatar }} {%- else -%} {{ 'icon-account.svg' | inline_asset_content }} {%- endif -%} {%- else -%} {{ 'icon-account.svg' | inline_asset_content }} {%- endif -%} {%- liquid if customer echo 'customer.account_fallback' | t else echo 'customer.log_in' | t endif -%} {%- endif -%}

{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when ‘@app’ -%}
{% render block %}
{%- endcase -%}
{%- endfor -%}

{% if cart == empty %} {{'icon-cart-empty.svg' | inline_asset_content }} {% else %} {{'icon-cart.svg' | inline_asset_content }} {% endif %} {{ 'templates.cart.cart' | t }} {%- if cart != empty -%}

{%- if cart.item_count < 100 -%} {{ cart.item_count }} {%- endif -%} {{ 'sections.header.cart_count' | t: count: cart.item_count }}

{%- endif -%}

{%- 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”: “scheme-1”
},
{
“type”: “color_scheme”,
“id”: “menu_color_scheme”,
“label”: “t:sections.header.settings.menu_color_scheme.label”,
“default”: “scheme-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.header__7.content”,
“info”: “t:sections.header.settings.header__7.info”
},
{
“type”: “checkbox”,
“id”: “enable_customer_avatar”,
“default”: true,
“label”: “t:sections.header.settings.enable_customer_avatar.label”,
“info”: “t:sections.header.settings.enable_customer_avatar.info”
},
{
“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 %}

FB6 · December 3, 2024, 3:47pm

Yes exactly! My god, rapid reponse time!