Hi,
I need some help in changing the layout of the mega menu of our new store. It is based on the Alchemy theme.
The url is: https://street-called-madison.myshopify.com
We want the submerse listing separated with an image in between. The images should be related to the menu on it’s left. A picture says more than a 1000 words so here I made a before and after ‘design’.
Can anyone guide me how to do this? All CSS I did was far from successful.
Hope hearing from you. Cheers Teddy
Hi @Teddy9 ,
Please send me the code of header.liquid file, I will check it.
Thanks! you are the best.
I attached the header.liquid file for your reference.
Let me know if you need anything else.
Again, thank you and very much appreciated!
Cheers,
Teddy
Hi @Teddy9
Open Edit code at Online store > Themes > Edit code
Find the file “styles.css” and paste the following code at the end of the file:
#menu-tier-2 .nav-columns.nav-columns--count-2.nav-columns--cta-count-1{
display: grid;
grid-template-columns: repeat(3,1fr); /* 3 is the number of columns in the menu */
}
#menu-tier-2 .nav-columns.nav-columns--count-2.nav-columns--cta-count-1 li:nth-child(3) {
grid-row: 1/1;
grid-column: 2 / 3;
/* Here column 3 will be repositioned for column 2. You can easily do the same in case your menu has 4 columns
*/
}
I hope that it will work for you. Please let us know if you need further help.
Hi @Teddy9 ,
Please send me the code of nav-call-to-action.liquid file, I will add new option for it
Hi @Litos ,
My apologies for my late response, I was not behind my laptop.
You can find the nav-call-to-action.liquid code below:
{%- if block.settings.image != blank or block.settings.title != blank or block.settings.button_label != blank -%}
{%- if block.settings.button_label != blank -%}
I just noticed you solution. Thanks for this! It worked for the 3 columns. I will now try to add the 4th column. Keep you posted. Thanks again!!
Hi @BSS-Commerce ,
Here is the result and conclusion in relation the 2nd image on the right that we want visible in the menu.. I prepared a slide for your reference..
Hi @Teddy9
Thank you so much for your reply. If possible, please share your store access with us. We will help you check it and solve the issue for you.
That would be awesome!! Thanks! Let me fix you the access now. 
Hi @Teddy9 ,
Please follow the steps below:
{%- liquid
assign has_country_dd = false
assign has_lang_dd = false
if section.settings.show_country_selector and localization.available_countries.size > 1
assign has_country_dd = true
endif
if section.settings.show_language_selector and localization.available_languages.size > 1
assign has_lang_dd = true
endif
assign min_hdr_items_width = 132
if section.settings.logo_width > min_hdr_items_width
assign hdr_items_width = section.settings.logo_width
else
assign hdr_items_width = min_hdr_items_width
endif
if section.settings.logo != blank
assign logo_width = section.settings.logo.width
if logo_width > section.settings.logo_width
assign logo_width = section.settings.logo_width | plus: 0
endif
assign logo_height = logo_width | divided_by: section.settings.logo.aspect_ratio | round
if logo_height > 150
assign logo_width = 150 | times: section.settings.logo.aspect_ratio | round
assign logo_height = 150
endif
assign logo_width_2x = logo_width | times: 2
assign logo_height_2x = logo_height | times: 2
endif
-%}
{%- style -%}
{%- if section.settings.enable_sticky -%}
.js .section-header { position: -webkit-sticky; position: sticky; }
.viewport-height, .viewport-height .slide {
min-height: calc(var(--viewport-height, 100vh) - var(--header-height, 96px) + 26px);
}
{%- unless section.settings.logo == blank -%}
{%- if section.settings.enable_logo_shrink and logo_height > 44 -%}
.scrolled-down .logo__default-image, .scrolled-down .logo__contrast-image { max-height: 44px; }
{%- endif -%}
{%- endunless -%}
{%- endif -%}
{%- if section.settings.enable_header_overlap -%}
.js .section-header { height: var(--header-height) }
.js .scrolled-down .section-header { height: calc(var(--header-height) - 13px); }
.js .active-banner:first-child { margin-top: calc(var(--header-height) * -1); }
.js .active-banner:first-child .viewport-height,
.js .active-banner:first-child .viewport-height .slide { min-height: var(--viewport-height, 100vh); }
.js .active-banner:first-child .text-overlay { margin-top: calc(var(--header-height) + 20px); }
@media (max-width: 480px) {
.js .active-banner:first-child .mobile-stacked .text-overlay { margin-top: 0; }
}
@media (min-width: 768px) {
.js .active-banner:first-child .text-overlay { margin-top: calc(var(--header-height) + 40px); }
}
{%- else -%}
.js .active-banner:first-child .viewport-height, .js .active-banner:first-child .viewport-height .slide {
min-height: calc(var(--viewport-height, 100vh) - var(--header-height));
}
{%- endif -%}
{%- if section.settings.menu_align_logo_left -%}
.pageheader__contents--inline--visible.pageheader__contents--inline--left-logo .header-items,
.pageheader__contents--inline--visible.pageheader__contents--inline--left-logo .logo {
flex-basis: {{ hdr_items_width }}px !important;
}
.pageheader__contents--inline--left-logo:not(.pageheader__contents--inline--visible) .nav-row {
min-width: calc(100vw - {{ hdr_items_width | times: 2 | plus: 100 }}px);
}
{%- endif -%}
.logo__image { max-width: {{ section.settings.logo_width }}px; }
{%- endstyle -%}
{%- if settings.enable_search -%}
## {{ 'layout.search.title' | t }}
{%- for i in (1..5) -%}
{%- if settings.live_search_show_vendor -%}
{%- endif -%}
{%- endfor -%}
{%- if section.settings.search_menu_linklist != blank and linklists[section.settings.search_menu_linklist].links.size > 0 -%}
{%- if section.settings.search_menu_title != blank -%}
### {{ section.settings.search_menu_title }}
{%- endif -%}
{%- for link in linklists[section.settings.search_menu_linklist].links -%}
- {{ link.title | strip }}
{%- endfor -%}
{% endif %}
{%- endif -%}
{% schema %}
{
name: "Header",
class: "section-header",
settings: [
{
type: "image_picker",
id: "logo",
label: "Main logo"
},
{
type: "image_picker",
id: "alt_logo",
label: "Contrast logo (optional)",
info: "Shown when header is transparent."
},
{
type: "range",
id: "logo_width",
min: 50,
max: 250,
step: 5,
unit: "px",
label: "Maximum logo width",
info: "Logo height is restricted to 150px.",
default: 150
},
{
type: "header",
content: "Layout"
},
{
type: "checkbox",
id: "enable_header_overlap",
label: "Enable transparent header",
info: "Applies when a full width section is shown at the top of the page, e.g. hero banner or slideshow.",
default: true
},
{
type: "checkbox",
id: "enable_sticky",
label: "Stick to top of screen on scroll",
default: true
},
{
type: "checkbox",
id: "enable_logo_shrink",
label: "Shrink logo image on scroll",
info: "Only applies if taller than the header.",
default: true
},
{
type: "header",
content: "Navigation"
},
{
type: "link_list",
id: "menu_linklist",
label: "Menu",
default: "main-menu"
},
{
type: "richtext",
id: "menu_under_text",
label: "Side menu footer text"
},
{
type: "checkbox",
id: "enable_inline_links",
label: "Show inline menu",
info: "Links will only be shown on larger screens and when they fit, otherwise the side menu link will be shown.",
default: false
},
{
type: "checkbox",
id: "menu_align_logo_left",
label: "Keep logo on the left",
info: "Only applies to the inline menu.",
default: false
},
{
type: "header",
content: "Search"
},
{
type: "text",
id: "search_menu_title",
label: "Quick links heading"
},
{
type: "link_list",
id: "search_menu_linklist",
label: "Quick links menu"
},
{
type: "header",
content: "Contact information",
info: "Shown in the side menu."
},
{
type: "checkbox",
id: "show_social_links",
label: "Show social icons",
info: "These can be added in Theme settings > Social media.",
default: false
},
{
type: "text",
id: "contact_info_phone",
label: "Phone number"
},
{
type: "text",
id: "contact_info_email",
label: "Email address",
info: "This should be just an email address, no additional words."
},
{
type: "checkbox",
id: "contact_info_in_mega",
label: "Show contact information in mega menus",
default: true
},
{
type: "header",
content: "Country/region Selector",
info: "Shown in the side menu."
},
{
type: "paragraph",
content: "To add a country/region, go to your [payment settings.](/admin/settings/payments)"
},
{
type: "checkbox",
id: "show_country_selector",
label: "Show country/region selector",
default: true
},
{
type: "header",
content: "Language Selector",
info: "Shown in the side menu."
},
{
type: "paragraph",
content: "To add a language, go to your [language settings.](/admin/settings/languages)"
},
{
type: "checkbox",
id: "show_language_selector",
label: "Show language selector",
default: true
},
{
type: "header",
content: "Menu promotion overlay"
},
{
type: "color",
id: "tint_color",
label: "Background color",
default: "#000000"
},
{
type: "range",
id: "tint_opacity",
min: 0,
max: 100,
step: 5,
unit: "%",
label: "Background opacity",
default: 20
},
{
type: "color",
id: "text_color",
label: "Text color",
default: "#ffffff"
}
],
blocks: [
{
type: "image",
name: "Menu promotion",
settings: [
{
type: "paragraph",
content: "Promotions are shown in dropdown menus (when there is sufficient space). [Learn more.](https://support.cleancanvas.co.uk/alchemy-theme-support/header-footer-alchemy/#inner-anchor-1)"
},
{
type: "header",
content: "Where to show"
},
{
type: "text",
id: "menu_item",
label: "Menu item",
info: "Enter the title of a menu item to show the promotion in, e.g. 'Shop'. Leave this empty to show the promotion in the first level of the side menu (will not be shown in dropdown menus)."
},
{
type: "header",
content: "Details"
},
{
type: "link_list",
id: "linklist",
label: "Links menu"
},
{
type: "image_picker",
id: "image",
label: "Image"
},
{
type: "textarea",
id: "title",
label: "Heading"
},
{
type: "text",
id: "button_label",
label: "Link text"
},
{
type: "url",
id: "cta_link",
label: "Link URL"
}
]
}
]
}
{% endschema %}
{%- if block.settings.linklist != blank -%}
- {%- for child_child_link in linklists[block.settings.linklist].links -%}
- {{ child_child_link.title | strip }}
{%- endfor -%}
{%- else -%}
{%- if block.settings.image != blank or block.settings.title != blank or block.settings.button_label != blank -%}
- {%- if block.settings.image != blank -%}
{%- assign img = block.settings.image -%}
{%- style -%}
#cta-{{ block.id }}::after { padding-top: {{ 1 | divided_by: img.aspect_ratio | times: 100 }}%; }
{%- endstyle -%}
{%- endif -%}
{%- if block.settings.title != blank -%}
##
{{- block.settings.title | newline_to_br -}}
{%- endif -%}
{%- if block.settings.button_label != blank -%}
{{ block.settings.button_label | escape }}
{%- endif -%}
{%- endif -%}
{%- endif -%}
Then you just need to remove sub menu at ‘Shop’ and add linklist for each mega menu block, it will work fine.
Hope it is clear to you.
Hi @Teddy9
We checked your issue and saw that:
Problem 2: You can scroll down to the bottom of the file “styles.css.liquid” and check how I customized some classes. If you need further help from us, please let us know.
Besides, do you mean when scrolling, it stays like the image below? Please reconfirm with us and we will help you:
Hey @BSS-Commerce ,
Fantastic! I noticed the menu changing. Absolutely great. Very happy with it. Let me answer your question first.
Yes, smart solution btw and understood.
No it is all good now. The transparent background is white again and the font is changing with the transparent header scrolling. So also good.
I do have on question regarding the position/alignment of the sub menu listing and related image on the right.
How can I move both images more to the left so they are positioned next to the submenu listing they are related to? For instance LUNA HILL is a Girls collection/brand and CHARLIE RAY is a Boys collection/brand. I would get something like this:
Just want to thanks you again for your help. It’s amazing.
Hi @Litos thanks for your extensive reply and solution! Cheers, Teddy
Hi @Teddy9
You can go to the store to see the results. Hopefully, it will be what you want. If it doesn’t work or have any questions, please let us know. We will help you.
100% Perfect!
