Hi, I am using the cascade theme.
I have 5 items on my top navigation menu, but because it is left-aligned and inline with the logo, the theme is only showing the first 3 menu items, then adding a “more” link that the user has to click in order to see the menu items 4 and 5.
I’d like to be able to show the entire nav menu, as well as center the navigation underneath the logo. Does anyone know how to do this?
Many thanks.
Hello There,
Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.
Hi @dcpaye ,
Are you wanting this?
Please send me the full code of sections/header.liquid file. I will check and guide you in detail.
Thanks for your reply. Below is a screenshot of the current nav bar. When clicked, the “more” on the left menu reveals the additional menu items. I would like all of the menu items to show all of the time, as well as be centered and below the logo. My store is www.fieldtripbrand.com.
Many thanks in advance for your help!
Yes, that is what I am looking for! Here are the files you requested from sections/header.liquid
{%- 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 %}{% assign logo = section.settings.logo %}
{% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
{% if banner_alternate_logo_enabled %}
{% assign logo = banner_alternate_logo %}
{% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
{% endif %}
{% else %}
{{ shop.name }}
{% endif %}
{% if template.name == ‘index’ %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
{% if section.settings.show_search %}
<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>
{% comment %}
Active Header State
{% endcomment %}
{%- assign section_color = ‘active’ -%}
{% comment %}
Navigation
{% endcomment %}
{% comment %}
Cart
{% endcomment %}
{% comment %}
Search
{% endcomment %}
{% 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’ %}
{%- 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 %}
{% 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 %}
Hi @dcpaye ,
Please change all code:
{%- 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 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 %}
{% 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 %}
{% render 'icon-close' %}
{% 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 %}
{% else %}
{{ 'lifestyle-1' | placeholder_svg_tag }}
{% 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 %}
Hope it helps!
@LitExtention Thank you! I can see the entire menu now! However, it is still left-aligned and the “Shop” menu item on the left is too close to the left page margin. Any suggestions on how to center the menu? Many thanks!
Hi @dcpaye ,
Please find ‘max-site-width nav__container align–middle text-align–left’ and change code:
text-align–left => text-align–center
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
@LitExtention thank you so much!
