HELP with Drop-down main Menu on Home page

Store Design
, , , , ,
1

Hi community,

My website is https://cphagen.com/ and uses an older version of theme Cascade.

I am looking for effective way to transform the drop-down menu on my home page (desktop version).

HomePage
HomePage1920×1080 667 KB

Actual Menu
Actual Menu1920×1080 92.5 KB

close to desired version
close to desired version1920×1080 432 KB

I really don’t like the fact that when one click on the categories, the all page turns green.

I would prefer a smaller box for each main category.

The perfect type of menu for me, would be the one used here: https://patsports.com.au/

Can anyone help me?

Thank you all.

2

Apply max-width property to make it smaller and background: none to remove color

3

Hi. Thank you.
I don’t know how to do it and honestly what I am looking for is something like this: https://patsports.com.au/ Little columns opening below each category of the main menu.

4

Hi @CPHAGEN_Nordic ,

It’s basically a new header you’re looking for, the current one is using JS and CSS to create an overlay on click. What you’re looking for is a classic dropdown.

Have you checked in your Theme settings if Cascade theme has different nav styles? If not it would have to be built into the theme. There’s likely a header section file and one would begin there to customize.

Regards,

Sam - Owner / Lead Developer

Achieve Applabs

5

Hi! Thank you for your answer.

I didn’t know any of this :slightly_smiling_face:
Many people touched at my theme and now it’s a bit messy.

The file “header.liquid” looks like this:

{%- assign section_color = ‘primary’ -%}

{%- assign feature_image_placeholder = false -%}
{% assign banner_enabled = false %}
{% assign banner_alternate_logo_enabled = false %}
{% for block in section.blocks %}
{% if block.type == ‘banner’ and template.name == ‘index’ %}
{% assign banner_enabled = true %}
{% assign section_color = block.settings.overlay_text_color %}
{% if block.settings.logo_alternate %}
{% assign banner_alternate_logo_enabled = true %}
{% assign banner_alternate_logo = block.settings.logo_alternate %}
{% endif %}
{% endif %}
{% endfor %}

{% capture header_underline_link %}header-border-link color–{{ section_color }}-text hv–div–border-bottom–{{ section_color }}-text color–header-active{% endcapture %}

{%- if section.settings.logo != blank -%} .site-header__logo-image { max-width: {{ section.settings.logo_max_width }}px; } {%- endif -%}

{%- if banner_enabled -%}
{%- for block in section.blocks -%}
{%- if block.type == ‘banner’ and template.name == ‘index’ -%}
{% comment %}
Add class to body to fix section padding for first section
{% endcomment %}

{%- endif -%}
{%- endfor -%}
{%- endif -%}

{% if template.name == ‘index’ %}
{%- if section.settings.sticky_header %}
{% capture sticky_data %}data-sticky-header=“true” {% if section.settings.show_announcement %}{% if section.settings.home_page_only == false or template.name == ‘index’ %}data-announcement=“true”{% endif %}{% endif %}{% endcapture %}
{% endif %}
{% if banner_enabled and section.settings.sticky_header and section.settings.show_announcement %}
{% capture sticky_header_banner %}data-sticky-header-with-banner-and-announcement=“true”{% endcapture %}
{% endif %}
{% if banner_enabled and section.settings.sticky_header and section.settings.show_announcement == false %}
{% capture sticky_header_banner %}data-sticky-header-with-banner-and-no-announcement=“true”{% endcapture %}
{% endif %}
{% else %}
{%- if section.settings.sticky_header %}
{% capture sticky_data %}data-sticky-header=“true” {% if section.settings.show_announcement %}{% if section.settings.home_page_only == false or template.name == ‘index’ %}data-announcement=“true”{% endif %}{% endif %}{% endcapture %}
{% endif %}
{% endif %}

{% if section.settings.sticky_header %}

{% endif %}

{% unless banner_enabled %}

{% endunless %}
{% if section.settings.show_announcement %} {% capture class %}block full--w bg--{{ section.settings.announcement_color }}-background color--{{ section.settings.announcement_color }}-text px2 py1 font-size--sm text-align--center {% endcapture %} {% if section.settings.home_page_only == false or template.name == 'index' %} {% if section.settings.link == blank %} {% else %} {% endif %} {% endif %} {% endif %}
{% if section.settings.show_menu_icon == false and linklists[section.settings.main_linklist].links != blank and linklists[section.settings.main_linklist].links.size == 1 %} {% assign single_link = linklists[section.settings.main_linklist].links[0] %} {% assign single_link_handle = single_link.title | handleize %}
{{ single_link.title }}
 {% else %} {% if section.settings.show_menu_icon %}
{% render 'icon-menu' %}
{% else %}
{{ 'general.navigation.menu' | t }}
 {% endif %} {% endif %}
{%- render 'no-js__mobile-menu' -%}
    {% for link in linklists[section.settings.main_linklist].links %} {%- assign child_list_handle = link.title | handleize -%} {% if linklists[child_list_handle].links != blank %}
  • {{ link.title }} {% render 'icon-chevron-down' %} {% render 'icon-chevron-up' %}
    {% assign link_handle = link.title | handleize %} {%- render 'no-js__submenu', link_handle: link_handle, -%}
    • {% else %}
  • {{ link.title }}
    • {% endif %} {% endfor %}
  • {{ 'general.navigation.more' | t }}
{% endif %}

{% if shop.customer_accounts_enabled %}
{% if customer %}

{{ 'layout.customer.account' | t }}
{% else %}
{{ 'layout.customer.log_in' | t }}
{% endif %} {% endif %}

{% if section.settings.show_search %}

{{ 'general.search.submit' | t }}
{% endif %}

<a href=“{{ routes.cart_url }}”
id=“CartLink”
class=“t–header-navigation header__link {% unless section.settings.show_cart_icon %}{{ header_underline_link }}{% else %}cart-icon color–{{ section_color }}-text hv–div–border-bottom–transparent color–header-active{% endunless %} font-size–m bg–transparent inline-block pointer m0 px1”
{% if settings.ajax_cart_method==“modal” %}
role=“button”
data-active-header-trigger
data-active-target=“cart”
aria-haspopup=“true”
{% endif %}
tabindex=“0”
data-top-level-item>

{% if section.settings.show_cart_icon %} {% render 'icon-cart' %} {% else %} {{ 'layout.cart.title' | t }} {% endif %} {% unless section.settings.show_cart_icon %}({% endunless %}{{ cart.item_count }}{% unless section.settings.show_cart_icon %}){% endunless %}

{% comment %}
Active Header State
{% endcomment %}
{%- assign section_color = ‘active’ -%}

{% comment %}
Navigation
{% endcomment %}

{%- render 'navigation__mobile', section_color: section_color, -%}
{%- render 'navigation__desktop', section_color: section_color, -%}

{% comment %}
Cart
{% endcomment %}

{% if additional_checkout_buttons %}
{{ content_for_additional_checkout_buttons }}
{% endif %}
{% comment %} Polite live region, for updating screen readers on cart changes {% endcomment %}

{% comment %}
Search
{% endcomment %}

{% comment %}{% endcomment %} {{ 'general.search.submit' | t }} {% render 'icon-search' %}
{% comment %} End Active Header State {% endcomment %}
{%- assign section_color = 'active' -%}

{% if banner_enabled %}
{% for block in section.blocks %}
{% if block.type == ‘banner’ and template.name == ‘index’ %}

{% assign section_color = block.settings.overlay_text_color %}
{% if block.settings.image %}

{% assign feature_image = block.settings.image %}
{% assign feature_image_mobile = block.settings.image_mobile %}
{% if block.settings.image_style == ‘fit_content’ %}

{% render 'responsive-image' with image: feature_image, max_width: 2000, max_height: 2000, section_color: section_color, %}
{% if feature_image_mobile %}
{% render 'responsive-image' with image: feature_image_mobile, max_width: 2000, max_height: 2000, section_color: section_color, %}
{% endif %} {% else %}
{% if feature_image_mobile %}
{% endif %} {% endif %}

{%- assign heading = block.settings.heading -%}
{%- assign cta_text = block.settings.cta_text -%}
{%- assign cta_url = block.settings.cta_url -%}
{%- assign content_position = block.settings.content_position -%}
{%- assign text_align = block.settings.text_align -%}
{% if cta_url != blank or heading != blank %}

{% assign content_position = content_position | split: ' ' %}
{% if heading != blank %}

{{ heading }}

{% endif %} {% if cta_url != blank %} {{ cta_text }} {% endif %}
{% endif %}
{% render 'icon-arrow-down' %}
{% else %}
{{ 'lifestyle-1' | placeholder_svg_tag }}
{% render 'icon-arrow-down' %}
{% endif %}

{% endif %}
{% endfor %}
{% endif %}

{% if request.page_type == ‘index’ %}
{% assign potential_action_target = shop.url | append: routes.search_url | append: “?q={search_term_string}” %}

{% endif %}

{% schema %}
{
“name”: “Header”,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_cart_icon”,
“label”: “Show cart icon”,
“info”: “If disabled text will be shown instead of icon”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Logo image”
},
{
“type”: “range”,
“id”: “logo_max_width”,
“min”: 50,
“max”: 450,
“step”: 10,
“unit”: “px”,
“label”: “Custom logo width”,
“default”: 250
},
{
“type”: “checkbox”,
“id”: “sticky_header”,
“label”: “Sticky header on desktop”,
“default”: false
},
{
“type”: “header”,
“content”: “Navigation”
},
{
“type”: “link_list”,
“id”: “main_linklist”,
“label”: “Menu”,
“default”: “main-menu”
},
{
“type”: “checkbox”,
“id”: “show_all_navigation_links”,
“label”: “Enable links to drop-down link headings”
},
{
“type”: “checkbox”,
“id”: “show_search”,
“label”: “Show search”
},
{
“type”: “header”,
“content”: “Mobile menu”
},
{
“type”: “checkbox”,
“id”: “show_menu_icon”,
“label”: “Show menu icon”,
“info”: “If disabled text will be shown instead of icon”
},
{
“type”: “link_list”,
“id”: “secondary_linklist”,
“label”: “Secondary menu”
},
{
“type”: “checkbox”,
“id”: “show_search_sidebar”,
“label”: “Show search”
},
{
“type”: “header”,
“content”: “Announcement bar”
},
{
“type”: “checkbox”,
“id”: “show_announcement”,
“label”: “Show announcement”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “home_page_only”,
“label”: “Home page only”,
“default”: true
},
{
“type”: “text”,
“id”: “text”,
“label”: “Text”,
“default”: “Announce something here”
},
{
“type”: “select”,
“id”: “announcement_color”,
“options”: [
{ “value”: “primary”, “label”: “Primary”},
{ “value”: “secondary”, “label”: “Secondary”},
{ “value”: “tertiary”, “label”: “Tertiary”}
],
“label”: “Announcement color combination”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Link”
}
],
“blocks”: [
{
“type”: “banner”,
“name”: “Banner image”,
“limit”: 1,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”,
“info”: “1250x1400px recommended”
},
{
“type”: “image_picker”,
“id”: “image_mobile”,
“label”: “Image - mobile (optional)”,
“info”: “800x1000px recommended.”
},
{
“type”: “select”,
“id”: “image_style”,
“label”: “Image style:”,
“options”: [
{
“value”: “full_screen”,
“label”: “Full Screen”
},
{
“value”: “fit_content”,
“label”: “Content”
}
],
“info”: “Use 'Content' style to avoid image cropping.”
},
{
“type”: “select”,
“id”: “overlay_text_color”,
“label”: “Text color”,
“info”: “Override header text color for the home page when banner image is enabled.”,
“options”: [
{ “value”: “primary”, “label”: “Primary text”},
{ “value”: “secondary”, “label”: “Secondary text”},
{ “value”: “tertiary”, “label”: “Tertiary text”},
{ “value”: “white”, “label”: “White”},
{ “value”: “black”, “label”: “Black”}
]
},
{
“type”: “image_picker”,
“id”: “logo_alternate”,
“label”: “Logo image”,
“info”: “Alternate logo for the banner image”
},
{
“type”: “header”,
“content”: “Content”
},
{
“type”: “text”,
“id”: “heading”,
“label”: “Heading”
},
{
“type”: “url”,
“id”: “cta_url”,
“label”: “Button link”
},
{
“type”: “text”,
“id”: “cta_text”,
“label”: “Button text”,
“default”: “Shop Now”
},
{
“type”: “select”,
“id”: “content_position”,
“label”: “Content position”,
“options”: [
{
“value”: “text-align–left align–middle”,
“label”: “Middle Left”
},
{
“value”: “text-align–center align–middle”,
“label”: “Middle Center”
},
{
“value”: “text-align–right align–middle”,
“label”: “Middle Right”
},
{
“value”: “text-align–left align–bottom”,
“label”: “Bottom Left”
},
{
“value”: “text-align–center align–bottom”,
“label”: “Bottom Center”
},
{
“value”: “text-align–right align–bottom”,
“label”: “Bottom Right”
}
],
“default”: “text-align–center align–middle”
},
{
“type”: “select”,
“id”: “text_align”,
“label”: “Text alignment”,
“options”: [
{
“value”: “text-align–left”,
“label”: “Left”
},
{
“value”: “text-align–center”,
“label”: “Center”
},
{
“value”: “text-align–right”,
“label”: “Right”
}
],
“default”: “text-align–left”
}
]
}
]
}
{% endschema %}

Don’t know if you can help me with this :slightly_smiling_face:

6

Hi! Thank you.

I didn’t know any of this.

Many people worked on my theme during last years…

My header file looks like this below.

I hope you can help me :slightly_smiling_face:

7

Hi @CPHAGEN_Nordic ,

I’d be happy to discuss further, send me a PM.

Thanks,

Sam - Owner / Lead Developer

Achieve Applabs

8

Hi @CPHAGEN_Nordic

The way your header was layout, it is a little complex to solve this with CSS alone. I would suggest you hire a developer to do so.

9

Thank you!

10

Thank you! :slightly_smiling_face: