How To Get Hover Menu On Without Dropdown List?

i want To Get Hover Menu On Without Dropdown List.. Currently its only on dropdown list

i want like this to be on single menu like..

my store url: https://a6b804-0a.myshopify.com/

1 Like

Hi @Emiway

What design you like to add in the hover for single menu?

Like this?

If it is check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

a.bold.link-faded-reverse:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px; 
    text-underline-offset: 5px;
}

And save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

Hi @Emiway ,

Please send me the code of header.liquid file, I will help you check it

i want like: if i hover on single menu than a background should come to clearly visible what’s it written.. Like Dropdown menu

{%- comment -%}
IMPLEMENTATION NOTE: Impact header with all the menu is an extremely complex piece of code. Due to requirements from design
team, we had to cover over hundred of potential combinations. As a consequence, this part (and all the menu snippets) are
extremely sensitive code that should (if possible) not be touched unless you have spend enough time to study and understand
the underlying logic of the menu.
{%- endcomment -%}

{%- if section.settings.show_country_selector and localization.available_countries.size > 1 -%}
{%- assign will_show_country_selector = true -%}
{%- endif -%}

{%- if section.settings.show_locale_selector and localization.available_languages.size > 1 -%}
{%- assign will_show_locale_selector = true -%}
{%- endif -%}

:root { --sticky-header-enabled: {%- if section.settings.enable_sticky -%}1{% else %}0{% endif %}; } #shopify-section-{{ section.id }} { --header-grid-template: "main-nav logo secondary-nav" / minmax(0, 1fr) auto minmax(0, 1fr); --header-padding-block: {% if section.settings.reduce_padding %}var(--spacing-3){% else %}var(--spacing-4-5){% endif %}; --header-background-opacity: {{ section.settings.background_opacity | divided_by: 100.0 }}; --header-background-blur-radius: {{ section.settings.background_blur_radius }}px; --header-transparent-text-color: {{ section.settings.transparent_header_text_color.rgb }}; {%- if section.settings.logo != blank -%} --header-logo-width: {{ section.settings.logo_mobile_max_width }}px; --header-logo-height: {{ section.settings.logo_mobile_max_width | divided_by: section.settings.logo.aspect_ratio | round }}px; {%- endif -%} position: {% if section.settings.enable_sticky %}sticky{% else %}relative{% endif %}; top: 0; z-index: 10; } {%- if section.settings.enable_sticky -%} .shopify-section--announcement-bar ~ #shopify-section-{{ section.id }} { top: calc(var(--sticky-announcement-bar-enabled, 0) * var(--announcement-bar-height, 0px)); } {%- endif -%} {%- if section.settings.opening_from == 'left' -%} @media screen and (max-width: 699px) { .navigation-drawer { --drawer-content-max-height: calc(100vh - (var(--spacing-2) * 2)); } } {%- endif -%} @media screen and (min-width: 700px) { #shopify-section-{{ section.id }} { {%- if section.settings.logo != blank -%} --header-logo-width: {{ section.settings.logo_max_width }}px; --header-logo-height: {{ section.settings.logo_max_width | divided_by: section.settings.logo.aspect_ratio | round }}px; {%- endif -%} --header-padding-block: {% if section.settings.reduce_padding %}var(--spacing-6){% else %}var(--spacing-8-5){% endif %}; } } {%- if section.settings.layout contains 'logo_left' -%} @media screen and (min-width: 1150px) { {%- if section.settings.secondary_menu != blank or will_show_country_selector or will_show_locale_selector -%} {%- assign max_percent = '55%' -%} {%- else -%} {%- assign max_percent = '70%' -%} {%- endif -%} #shopify-section-{{ section.id }} { --header-grid-template: "logo main-nav secondary-nav" / {% if section.settings.layout == 'logo_left_navigation_inline' %}auto minmax(0, 1fr) minmax(0, max-content){% else %}minmax(0, 1fr) fit-content({{ max_percent }}) minmax(0, 1fr){% endif %}; } } {%- endif -%}
{%- comment -%} -------------------------------------------------------------------------------------------------------------------- MAIN NAV AREA -------------------------------------------------------------------------------------------------------------------- {%- endcomment -%}
{{ 'header.general.open_menu' | t }} {%- render 'icon' with 'hamburger' -%} {{ 'header.general.open_search' | t }} {%- render 'icon' with 'search' -%}

{%- if section.settings.layout != ‘drawer’ and section.settings.menu.links.size > 0 -%}

    {%- for link in section.settings.menu.links -%} {% liquid assign link_title_downcase = link.title | downcase assign mega_menu_block = ''

    for block in section.blocks
    assign menu_item_downcase = block.settings.menu_item | strip | downcase

    if menu_item_downcase == link_title_downcase
    assign mega_menu_block = block
    break
    endif

    endfor
    %}

  • {%- if link.levels == 0 and mega_menu_block == '' -%} {{- link.title -}} {%- else -%} {%- if mega_menu_block != '' -%} {%- comment -%} Implementation note: the designers had the desire to show a lot of different kind of menus in Impact: one standard mega menu but also a kind of "sidebar" mode when the mega-menu appears in a drawer. Unfortunately, this comes with a lot of extra complexity as we have to go through two different code path: a "details" element for the standard menu, and a full drawer for the other one. {%- endcomment -%} {%- unless mega_menu_block.settings.layout == 'drawer' -%}
    {{- link.title -}} {%- render 'icon' with 'chevron-bottom' -%}

    {%- render ‘mega-menu-horizontal’, link: link, mega_menu_block: mega_menu_block -%}

    {%- else -%} {{- link.title -}} {%- render 'icon' with 'chevron-bottom' -%} {%- render 'navigation-panel', navigation_layout: section.settings.layout, main_menu: link, is_mega_menu: true, mega_menu_block: mega_menu_block -%} {%- endunless -%} {%- else -%}
    {{- link.title -}} {%- render 'icon' with 'chevron-bottom' -%}
      {%- for sub_link in link.links -%}
    • {%- if sub_link.levels == 0 -%} {{ sub_link.title }} {%- else -%}
      {{- sub_link.title -}} {%- render 'icon' with 'chevron-right' -%}
      {%- endif -%}
    • {%- endfor -%}
    {%- endif -%} {%- endif -%}
  • {%- endfor -%}
{%- endif -%}

{%- comment -%}

LOGO AREA

{%- endcomment -%}

{%- capture logo_content -%}
{%- if section.settings.logo -%}
{%- capture sizes -%}{{ section.settings.logo_max_width }}px{%- endcapture -%}
{%- capture widths -%}{{ section.settings.logo_max_width | times: 2 | at_most: section.settings.logo.width }}, {{ section.settings.logo_max_width | times: 3 | at_most: section.settings.logo.width }}{%- endcapture -%}
{{ shop.name }}
{{- section.settings.logo | image_url: width: section.settings.logo.width | image_tag: sizes: sizes, widths: widths, class: ‘header__logo-image’ -}}

{%- if section.settings.transparent_logo -%}
{{- section.settings.transparent_logo | image_url: width: section.settings.transparent_logo.width | image_tag: sizes: sizes, widths: widths, class: ‘header__logo-image header__logo-image–transparent’ -}}
{%- endif -%}
{%- else -%}
{{ shop.name }}
{%- endif -%}
{%- endcapture -%}

{%- if request.page_type == ‘index’ -%}

{{ logo_content }}

{% else %} {{ logo_content }} {% endif %}

{%- comment -%}

SECONDARY NAV AREA

{%- endcomment -%}

{%- if section.settings.header != 'drawer' and section.settings.secondary_menu.links.size > 0 -%}
    {%- for link in section.settings.secondary_menu.links -%}
  • {{ link.title }}
  • {%- endfor -%}
{%- endif -%}
{%- if section.settings.show_country_selector and localization.available_countries.size > 1 -%}
{%- render 'localization-selector', type: 'country', show_country_name: section.settings.show_country_name, show_country_flag: section.settings.show_country_flag, popover_vertical_position: 'end' -%}
{%- endif -%}

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

{%- render 'localization-selector', type: 'locale', popover_vertical_position: 'end' -%}
{%- endif -%} {{ 'header.general.open_search' | t }} {%- render 'icon' with 'search' -%}

{%- if shop.customer_accounts_enabled -%}

{{ ‘header.general.open_account’ | t }}
{%- render ‘icon’ with ‘account’ -%}

{%- endif -%}

<a href=“{{ routes.cart_url }}” data-no-instant class=“relative tap-area” {% if settings.cart_type != ‘page’ and request.page_type != ‘cart’ %}aria-controls=“cart-drawer”{% endif %}>
{{ ‘header.general.open_cart’ | t }}
{%- render ‘icon’ with ‘cart’ -%}

{{- cart.item_count -}}

{%- comment -%}

NAVIGATION MENU DRAWER

{%- endcomment -%}

{%- assign main_menu = section.settings.sidebar_menu | default: section.settings.menu -%}
{%- assign secondary_menu = section.settings.secondary_menu -%}

{%- if main_menu.links.size > 0 or secondary_menu.links.size > 0 -%}
<navigation-drawer mobile-opening=“{{ section.settings.opening_from }}” open-from=“left” id=“header-sidebar-menu” class=“navigation-drawer drawer {% if section.settings.layout != ‘drawer’ %}lg:hidden{% endif %}” {% if request.design_mode %}handle-section-events{% endif %}>
<button is=“close-button” aria-label=“{{ ‘general.accessibility.close’ | t | escape }}” {%- if section.settings.opening_from == ‘bottom’ -%}class=“sm-max:hidden”{%- endif -%}>
{%- render ‘icon’ with ‘close’, width: 19, height: 19 -%}

{%- render ‘navigation-panel’,
is_mega_menu: false,
main_menu: main_menu,
secondary_menu: secondary_menu,
mobile_opening: section.settings.opening_from,
layout: section.settings.layout,
show_social_media: section.settings.show_social_media,
show_country_selector: section.settings.show_country_selector,
show_country_name: section.settings.show_country_name,
show_country_flag: section.settings.show_country_flag,
show_locale_selector: section.settings.show_locale_selector -%}

{%- endif -%}

{% schema %}
{
“name”: “Header”,
“class”: “shopify-section–header”,
“tag”: “header”,
“settings”: [
{
“type”: “checkbox”,
“id”: “enable_sticky”,
“label”: “Enable sticky header”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “hide_on_scroll”,
“label”: “Hide on scroll”,
“default”: false
},
{
“type”: “header”,
“content”: “Logo”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Image”,
“info”: “280 x 80px .png recommended”
},
{
“type”: “range”,
“id”: “logo_max_width”,
“min”: 40,
“max”: 300,
“step”: 5,
“unit”: “px”,
“label”: “Image width”,
“default”: 140
},
{
“type”: “range”,
“id”: “logo_mobile_max_width”,
“min”: 25,
“max”: 170,
“step”: 5,
“unit”: “px”,
“label”: “Mobile image width”,
“default”: 100
},
{
“type”: “header”,
“content”: “Navigation”
},
{
“type”: “link_list”,
“id”: “menu”,
“label”: “Menu”,
“default”: “main-menu”
},
{
“type”: “link_list”,
“id”: “sidebar_menu”,
“label”: “Drawer menu”
},
{
“type”: “link_list”,
“id”: “secondary_menu”,
“label”: “Secondary menu”,
“info”: “This menu won’t show dropdown items. For best results, limit the number of links to 1 or 2.”
},
{
“type”: “select”,
“id”: “menu_open_trigger”,
“label”: “Open dropdown items on…”,
“info”: “Click mode is forced on touch devices.”,
“options”: [
{
“value”: “hover”,
“label”: “Hover”
},
{
“value”: “click”,
“label”: “Click”
}
],
“default”: “click”
},
{
“type”: “header”,
“content”: “Mobile navigation”
},
{
“type”: “select”,
“id”: “opening_from”,
“label”: “Opening from”,
“options”: [
{
“value”: “bottom”,
“label”: “Bottom”
},
{
“value”: “left”,
“label”: “Left”
}
],
“default”: “bottom”
},
{
“type”: “header”,
“content”: “Desktop”
},
{
“type”: “select”,
“id”: “layout”,
“label”: “Layout”,
“info”: “When centering navigation, you should limit your links to 5.”,
“options”: [
{
“value”: “logo_left_navigation_inline”,
“label”: “Logo left, navigation inline”
},
{
“value”: “logo_left_navigation_center”,
“label”: “Logo left, navigation center”
},
{
“value”: “logo_center_navigation_inline”,
“label”: “Logo center, navigation inline”
},
{
“value”: “drawer”,
“label”: “Drawer”
}
],
“default”: “logo_left_navigation_inline”
},
{
“type”: “header”,
“content”: “Social media”,
“info”: “This will only show in the drawer navigation.”
},
{
“type”: “checkbox”,
“id”: “show_social_media”,
“label”: “Show social media”,
“default”: true
},
{
“type”: “header”,
“content”: “Language selector”,
“info”: “To add a language, go to your language settings.
},
{
“type”: “checkbox”,
“id”: “show_locale_selector”,
“label”: “Show language selector”,
“default”: true
},
{
“type”: “header”,
“content”: “Country/region selector”,
“info”: “To add a country/region, go to your markets settings.. For best user experience, we recommend to keep this setting off and to use the free Shopify Geolocation app.”
},
{
“type”: “checkbox”,
“id”: “show_country_selector”,
“label”: “Show country/region selector”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_country_flag”,
“label”: “Show country flag”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_country_name”,
“label”: “Show country name”,
“default”: false
},
{
“type”: “header”,
“content”: “Transparent header”,
“info”: “Add a section on first position which allows transparent header such as slideshow or image with text overlay.”
},
{
“type”: “color”,
“id”: “transparent_header_text_color”,
“label”: “Text color”,
“default”: “#ffffff
},
{
“type”: “image_picker”,
“id”: “transparent_logo”,
“label”: “Logo image”,
“info”: “Use the same dimensions as main logo.”
},
{
“type”: “header”,
“content”: “Appearance”
},
{
“type”: “checkbox”,
“id”: “reduce_padding”,
“label”: “Reduce padding”,
“default”: false
},
{
“type”: “range”,
“id”: “background_opacity”,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “%”,
“label”: “Background opacity”,
“default”: 1
},
{
“type”: “range”,
“id”: “background_blur_radius”,
“min”: 0,
“max”: 20,
“step”: 2,
“unit”: “px”,
“label”: “Background blur radius”,
“default”: 4
}
],
“blocks”: [
{
“type”: “mega_menu”,
“name”: “Mega menu”,
“settings”: [
{
“type”: “text”,
“id”: “menu_item”,
“label”: “Menu item”,
“info”: “Enter menu item to apply a mega menu dropdown. Learn more.”
},
{
“type”: “select”,
“id”: “layout”,
“label”: “Layout”,
“options”: [
{
“value”: “horizontal”,
“label”: “Horizontal”
},
{
“value”: “horizontal_center”,
“label”: “Horizontal (centered)”
},
{
“value”: “drawer”,
“label”: “Drawer”
}
],
“default”: “horizontal”
},
{
“type”: “select”,
“id”: “submenu_style”,
“label”: “Submenu”,
“options”: [
{
“value”: “bold_text”,
“label”: “Bold - text only”
},
{
“value”: “bold_heading”,
“label”: “Bold - headings only”
}
],
“default”: “bold_heading”
},
{
“type”: “header”,
“content”: “Image 1”
},
{
“type”: “image_picker”,
“id”: “image_1”,
“label”: “Image”,
“info”: “1200 x 1200px .jpg recommended”
},
{
“type”: “text”,
“id”: “image_heading_1”,
“label”: “Heading”
},
{
“type”: “url”,
“id”: “image_link_1”,
“label”: “Link”
},
{
“type”: “color”,
“id”: “image_text_color_1”,
“label”: “Heading”,
“default”: “#ffffff
},
{
“type”: “header”,
“content”: “Image 2”
},
{
“type”: “image_picker”,
“id”: “image_2”,
“label”: “Image”,
“info”: “1200 x 1200px .jpg recommended”
},
{
“type”: “text”,
“id”: “image_heading_2”,
“label”: “Heading”
},
{
“type”: “url”,
“id”: “image_link_2”,
“label”: “Link”
},
{
“type”: “color”,
“id”: “image_text_color_2”,
“label”: “Heading”,
“default”: “#ffffff
},
{
“type”: “header”,
“content”: “Image 3”
},
{
“type”: “image_picker”,
“id”: “image_3”,
“label”: “Image”,
“info”: “1200 x 1200px .jpg recommended”
},
{
“type”: “text”,
“id”: “image_heading_3”,
“label”: “Heading”
},
{
“type”: “url”,
“id”: “image_link_3”,
“label”: “Link”
},
{
“type”: “color”,
“id”: “image_text_color_3”,
“label”: “Heading”,
“default”: “#ffffff
},
{
“type”: “header”,
“content”: “Featured product”
},
{
“type”: “product”,
“id”: “product”,
“label”: “Product”
},
{
“type”: “color”,
“id”: “product_card_background”,
“label”: “Card background”
},
{
“type”: “color”,
“id”: “product_card_text_color”,
“label”: “Card text”
},
{
“type”: “header”,
“content”: “Appearance”
},
{
“type”: “select”,
“id”: “promo_content_layout”,
“label”: “Promotional content layout”,
“info”: “To improve readability, layout can be changed automatically depending on the screen size, menu column count and promotional content. Learn more”,
“options”: [
{
“value”: “grid”,
“label”: “Grid”
},
{
“value”: “collage”,
“label”: “Collage”
},
{
“value”: “carousel”,
“label”: “Carousel”
}
],
“default”: “grid”
},
{
“type”: “checkbox”,
“id”: “stretch_promo”,
“label”: “Stretch to fill”,
“default”: false
},
{
“type”: “select”,
“id”: “drawer_link_image”,
“label”: “Drawer link image”,
“options”: [
{
“value”: “hide”,
“label”: “Hide”
},
{
“value”: “show”,
“label”: “Show product image”
}
],
“default”: “hide”
}
]
}
]
}
{% endschema %}

{%- if section.settings.show_country_selector and localization.available_countries.size > 1 -%}
{%- assign will_show_country_selector = true -%}
{%- endif -%}

{%- if section.settings.show_locale_selector and localization.available_languages.size > 1 -%}
{%- assign will_show_locale_selector = true -%}
{%- endif -%}

:root { --sticky-header-enabled: {%- if section.settings.enable_sticky -%}1{% else %}0{% endif %}; } #shopify-section-{{ section.id }} { --header-grid-template: "main-nav logo secondary-nav" / minmax(0, 1fr) auto minmax(0, 1fr); --header-padding-block: {% if section.settings.reduce_padding %}var(--spacing-3){% else %}var(--spacing-4-5){% endif %}; --header-background-opacity: {{ section.settings.background_opacity | divided_by: 100.0 }}; --header-background-blur-radius: {{ section.settings.background_blur_radius }}px; --header-transparent-text-color: {{ section.settings.transparent_header_text_color.rgb }}; {%- if section.settings.logo != blank -%} --header-logo-width: {{ section.settings.logo_mobile_max_width }}px; --header-logo-height: {{ section.settings.logo_mobile_max_width | divided_by: section.settings.logo.aspect_ratio | round }}px; {%- endif -%} position: {% if section.settings.enable_sticky %}sticky{% else %}relative{% endif %}; top: 0; z-index: 10; } {%- if section.settings.enable_sticky -%} .shopify-section--announcement-bar ~ #shopify-section-{{ section.id }} { top: calc(var(--sticky-announcement-bar-enabled, 0) * var(--announcement-bar-height, 0px)); } {%- endif -%} {%- if section.settings.opening_from == 'left' -%} @media screen and (max-width: 699px) { .navigation-drawer { --drawer-content-max-height: calc(100vh - (var(--spacing-2) * 2)); } } {%- endif -%} @media screen and (min-width: 700px) { #shopify-section-{{ section.id }} { {%- if section.settings.logo != blank -%} --header-logo-width: {{ section.settings.logo_max_width }}px; --header-logo-height: {{ section.settings.logo_max_width | divided_by: section.settings.logo.aspect_ratio | round }}px; {%- endif -%} --header-padding-block: {% if section.settings.reduce_padding %}var(--spacing-6){% else %}var(--spacing-8-5){% endif %}; } } {%- if section.settings.layout contains 'logo_left' -%} @media screen and (min-width: 1150px) { {%- if section.settings.secondary_menu != blank or will_show_country_selector or will_show_locale_selector -%} {%- assign max_percent = '55%' -%} {%- else -%} {%- assign max_percent = '70%' -%} {%- endif -%} #shopify-section-{{ section.id }} { --header-grid-template: "logo main-nav secondary-nav" / {% if section.settings.layout == 'logo_left_navigation_inline' %}auto minmax(0, 1fr) minmax(0, max-content){% else %}minmax(0, 1fr) fit-content({{ max_percent }}) minmax(0, 1fr){% endif %}; } } {%- endif -%}
{%- comment -%} -------------------------------------------------------------------------------------------------------------------- MAIN NAV AREA -------------------------------------------------------------------------------------------------------------------- {%- endcomment -%}
{{ 'header.general.open_menu' | t }} {%- render 'icon' with 'hamburger' -%} {{ 'header.general.open_search' | t }} {%- render 'icon' with 'search' -%}

{%- if section.settings.layout != ‘drawer’ and section.settings.menu.links.size > 0 -%}

    {%- for link in section.settings.menu.links -%} {% liquid assign link_title_downcase = link.title | downcase assign mega_menu_block = ''

    for block in section.blocks
    assign menu_item_downcase = block.settings.menu_item | strip | downcase

    if menu_item_downcase == link_title_downcase
    assign mega_menu_block = block
    break
    endif

    endfor
    %}

  • {%- if link.levels == 0 and mega_menu_block == '' -%} {{- link.title -}} {%- else -%} {%- if mega_menu_block != '' -%} {%- comment -%} Implementation note: the designers had the desire to show a lot of different kind of menus in Impact: one standard mega menu but also a kind of "sidebar" mode when the mega-menu appears in a drawer. Unfortunately, this comes with a lot of extra complexity as we have to go through two different code path: a "details" element for the standard menu, and a full drawer for the other one. {%- endcomment -%} {%- unless mega_menu_block.settings.layout == 'drawer' -%}
    {{- link.title -}} {%- render 'icon' with 'chevron-bottom' -%}

    {%- render ‘mega-menu-horizontal’, link: link, mega_menu_block: mega_menu_block -%}

    {%- else -%} {{- link.title -}} {%- render 'icon' with 'chevron-bottom' -%} {%- render 'navigation-panel', navigation_layout: section.settings.layout, main_menu: link, is_mega_menu: true, mega_menu_block: mega_menu_block -%} {%- endunless -%} {%- else -%}
    {{- link.title -}} {%- render 'icon' with 'chevron-bottom' -%}
      {%- for sub_link in link.links -%}
    • {%- if sub_link.levels == 0 -%} {{ sub_link.title }} {%- else -%}
      {{- sub_link.title -}} {%- render 'icon' with 'chevron-right' -%}
      {%- endif -%}
    • {%- endfor -%}
    {%- endif -%} {%- endif -%}
  • {%- endfor -%}
{%- endif -%}

{%- comment -%}

LOGO AREA

{%- endcomment -%}

{%- capture logo_content -%}
{%- if section.settings.logo -%}
{%- capture sizes -%}{{ section.settings.logo_max_width }}px{%- endcapture -%}
{%- capture widths -%}{{ section.settings.logo_max_width | times: 2 | at_most: section.settings.logo.width }}, {{ section.settings.logo_max_width | times: 3 | at_most: section.settings.logo.width }}{%- endcapture -%}
{{ shop.name }}
{{- section.settings.logo | image_url: width: section.settings.logo.width | image_tag: sizes: sizes, widths: widths, class: ‘header__logo-image’ -}}

{%- if section.settings.transparent_logo -%}
{{- section.settings.transparent_logo | image_url: width: section.settings.transparent_logo.width | image_tag: sizes: sizes, widths: widths, class: ‘header__logo-image header__logo-image–transparent’ -}}
{%- endif -%}
{%- else -%}
{{ shop.name }}
{%- endif -%}
{%- endcapture -%}

{%- if request.page_type == ‘index’ -%}

{{ logo_content }}

{% else %} {{ logo_content }} {% endif %}

{%- comment -%}

SECONDARY NAV AREA

{%- endcomment -%}

{%- if section.settings.header != 'drawer' and section.settings.secondary_menu.links.size > 0 -%}
    {%- for link in section.settings.secondary_menu.links -%}
  • {{ link.title }}
  • {%- endfor -%}
{%- endif -%}
{%- if section.settings.show_country_selector and localization.available_countries.size > 1 -%}
{%- render 'localization-selector', type: 'country', show_country_name: section.settings.show_country_name, show_country_flag: section.settings.show_country_flag, popover_vertical_position: 'end' -%}
{%- endif -%}

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

{%- render 'localization-selector', type: 'locale', popover_vertical_position: 'end' -%}
{%- endif -%} {{ 'header.general.open_search' | t }} {%- render 'icon' with 'search' -%}

{%- if shop.customer_accounts_enabled -%}

{{ ‘header.general.open_account’ | t }}
{%- render ‘icon’ with ‘account’ -%}

{%- endif -%}

<a href=“{{ routes.cart_url }}” data-no-instant class=“relative tap-area” {% if settings.cart_type != ‘page’ and request.page_type != ‘cart’ %}aria-controls=“cart-drawer”{% endif %}>
{{ ‘header.general.open_cart’ | t }}
{%- render ‘icon’ with ‘cart’ -%}

{{- cart.item_count -}}

{%- comment -%}

NAVIGATION MENU DRAWER

{%- endcomment -%}

{%- assign main_menu = section.settings.sidebar_menu | default: section.settings.menu -%}
{%- assign secondary_menu = section.settings.secondary_menu -%}

{%- if main_menu.links.size > 0 or secondary_menu.links.size > 0 -%}
<navigation-drawer mobile-opening=“{{ section.settings.opening_from }}” open-from=“left” id=“header-sidebar-menu” class=“navigation-drawer drawer {% if section.settings.layout != ‘drawer’ %}lg:hidden{% endif %}” {% if request.design_mode %}handle-section-events{% endif %}>
<button is=“close-button” aria-label=“{{ ‘general.accessibility.close’ | t | escape }}” {%- if section.settings.opening_from == ‘bottom’ -%}class=“sm-max:hidden”{%- endif -%}>
{%- render ‘icon’ with ‘close’, width: 19, height: 19 -%}

{%- render ‘navigation-panel’,
is_mega_menu: false,
main_menu: main_menu,
secondary_menu: secondary_menu,
mobile_opening: section.settings.opening_from,
layout: section.settings.layout,
show_social_media: section.settings.show_social_media,
show_country_selector: section.settings.show_country_selector,
show_country_name: section.settings.show_country_name,
show_country_flag: section.settings.show_country_flag,
show_locale_selector: section.settings.show_locale_selector -%}

{%- endif -%}

{% schema %}
{
“name”: “Header”,
“class”: “shopify-section–header”,
“tag”: “header”,
“settings”: [
{
“type”: “checkbox”,
“id”: “enable_sticky”,
“label”: “Enable sticky header”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “hide_on_scroll”,
“label”: “Hide on scroll”,
“default”: false
},
{
“type”: “header”,
“content”: “Logo”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Image”,
“info”: “280 x 80px .png recommended”
},
{
“type”: “range”,
“id”: “logo_max_width”,
“min”: 40,
“max”: 300,
“step”: 5,
“unit”: “px”,
“label”: “Image width”,
“default”: 140
},
{
“type”: “range”,
“id”: “logo_mobile_max_width”,
“min”: 25,
“max”: 170,
“step”: 5,
“unit”: “px”,
“label”: “Mobile image width”,
“default”: 100
},
{
“type”: “header”,
“content”: “Navigation”
},
{
“type”: “link_list”,
“id”: “menu”,
“label”: “Menu”,
“default”: “main-menu”
},
{
“type”: “link_list”,
“id”: “sidebar_menu”,
“label”: “Drawer menu”
},
{
“type”: “link_list”,
“id”: “secondary_menu”,
“label”: “Secondary menu”,
“info”: “This menu won’t show dropdown items. For best results, limit the number of links to 1 or 2.”
},
{
“type”: “select”,
“id”: “menu_open_trigger”,
“label”: “Open dropdown items on…”,
“info”: “Click mode is forced on touch devices.”,
“options”: [
{
“value”: “hover”,
“label”: “Hover”
},
{
“value”: “click”,
“label”: “Click”
}
],
“default”: “click”
},
{
“type”: “header”,
“content”: “Mobile navigation”
},
{
“type”: “select”,
“id”: “opening_from”,
“label”: “Opening from”,
“options”: [
{
“value”: “bottom”,
“label”: “Bottom”
},
{
“value”: “left”,
“label”: “Left”
}
],
“default”: “bottom”
},
{
“type”: “header”,
“content”: “Desktop”
},
{
“type”: “select”,
“id”: “layout”,
“label”: “Layout”,
“info”: “When centering navigation, you should limit your links to 5.”,
“options”: [
{
“value”: “logo_left_navigation_inline”,
“label”: “Logo left, navigation inline”
},
{
“value”: “logo_left_navigation_center”,
“label”: “Logo left, navigation center”
},
{
“value”: “logo_center_navigation_inline”,
“label”: “Logo center, navigation inline”
},
{
“value”: “drawer”,
“label”: “Drawer”
}
],
“default”: “logo_left_navigation_inline”
},
{
“type”: “header”,
“content”: “Social media”,
“info”: “This will only show in the drawer navigation.”
},
{
“type”: “checkbox”,
“id”: “show_social_media”,
“label”: “Show social media”,
“default”: true
},
{
“type”: “header”,
“content”: “Language selector”,
“info”: “To add a language, go to your language settings.
},
{
“type”: “checkbox”,
“id”: “show_locale_selector”,
“label”: “Show language selector”,
“default”: true
},
{
“type”: “header”,
“content”: “Country/region selector”,
“info”: “To add a country/region, go to your markets settings.. For best user experience, we recommend to keep this setting off and to use the free Shopify Geolocation app.”
},
{
“type”: “checkbox”,
“id”: “show_country_selector”,
“label”: “Show country/region selector”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_country_flag”,
“label”: “Show country flag”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_country_name”,
“label”: “Show country name”,
“default”: false
},
{
“type”: “header”,
“content”: “Transparent header”,
“info”: “Add a section on first position which allows transparent header such as slideshow or image with text overlay.”
},
{
“type”: “color”,
“id”: “transparent_header_text_color”,
“label”: “Text color”,
“default”: “#ffffff
},
{
“type”: “image_picker”,
“id”: “transparent_logo”,
“label”: “Logo image”,
“info”: “Use the same dimensions as main logo.”
},
{
“type”: “header”,
“content”: “Appearance”
},
{
“type”: “checkbox”,
“id”: “reduce_padding”,
“label”: “Reduce padding”,
“default”: false
},
{
“type”: “range”,
“id”: “background_opacity”,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “%”,
“label”: “Background opacity”,
“default”: 1
},
{
“type”: “range”,
“id”: “background_blur_radius”,
“min”: 0,
“max”: 20,
“step”: 2,
“unit”: “px”,
“label”: “Background blur radius”,
“default”: 4
}
],
“blocks”: [
{
“type”: “mega_menu”,
“name”: “Mega menu”,
“settings”: [
{
“type”: “text”,
“id”: “menu_item”,
“label”: “Menu item”,
“info”: “Enter menu item to apply a mega menu dropdown. Learn more.”
},
{
“type”: “select”,
“id”: “layout”,
“label”: “Layout”,
“options”: [
{
“value”: “horizontal”,
“label”: “Horizontal”
},
{
“value”: “horizontal_center”,
“label”: “Horizontal (centered)”
},
{
“value”: “drawer”,
“label”: “Drawer”
}
],
“default”: “horizontal”
},
{
“type”: “select”,
“id”: “submenu_style”,
“label”: “Submenu”,
“options”: [
{
“value”: “bold_text”,
“label”: “Bold - text only”
},
{
“value”: “bold_heading”,
“label”: “Bold - headings only”
}
],
“default”: “bold_heading”
},
{
“type”: “header”,
“content”: “Image 1”
},
{
“type”: “image_picker”,
“id”: “image_1”,
“label”: “Image”,
“info”: “1200 x 1200px .jpg recommended”
},
{
“type”: “text”,
“id”: “image_heading_1”,
“label”: “Heading”
},
{
“type”: “url”,
“id”: “image_link_1”,
“label”: “Link”
},
{
“type”: “color”,
“id”: “image_text_color_1”,
“label”: “Heading”,
“default”: “#ffffff
},
{
“type”: “header”,
“content”: “Image 2”
},
{
“type”: “image_picker”,
“id”: “image_2”,
“label”: “Image”,
“info”: “1200 x 1200px .jpg recommended”
},
{
“type”: “text”,
“id”: “image_heading_2”,
“label”: “Heading”
},
{
“type”: “url”,
“id”: “image_link_2”,
“label”: “Link”
},
{
“type”: “color”,
“id”: “image_text_color_2”,
“label”: “Heading”,
“default”: “#ffffff
},
{
“type”: “header”,
“content”: “Image 3”
},
{
“type”: “image_picker”,
“id”: “image_3”,
“label”: “Image”,
“info”: “1200 x 1200px .jpg recommended”
},
{
“type”: “text”,
“id”: “image_heading_3”,
“label”: “Heading”
},
{
“type”: “url”,
“id”: “image_link_3”,
“label”: “Link”
},
{
“type”: “color”,
“id”: “image_text_color_3”,
“label”: “Heading”,
“default”: “#ffffff
},
{
“type”: “header”,
“content”: “Featured product”
},
{
“type”: “product”,
“id”: “product”,
“label”: “Product”
},
{
“type”: “color”,
“id”: “product_card_background”,
“label”: “Card background”
},
{
“type”: “color”,
“id”: “product_card_text_color”,
“label”: “Card text”
},
{
“type”: “header”,
“content”: “Appearance”
},
{
“type”: “select”,
“id”: “promo_content_layout”,
“label”: “Promotional content layout”,
“info”: “To improve readability, layout can be changed automatically depending on the screen size, menu column count and promotional content. Learn more”,
“options”: [
{
“value”: “grid”,
“label”: “Grid”
},
{
“value”: “collage”,
“label”: “Collage”
},
{
“value”: “carousel”,
“label”: “Carousel”
}
],
“default”: “grid”
},
{
“type”: “checkbox”,
“id”: “stretch_promo”,
“label”: “Stretch to fill”,
“default”: false
},
{
“type”: “select”,
“id”: “drawer_link_image”,
“label”: “Drawer link image”,
“options”: [
{
“value”: “hide”,
“label”: “Hide”
},
{
“value”: “show”,
“label”: “Show product image”
}
],
“default”: “hide”
}
]
}
]
}
{% endschema %}

Hi @Emiway ,

I checked another post, did you solve it?