Hey,
I can’t figure out how to make my main menu item clickable, as of now when I click on the menu item it shows me the drop down menu. I want to be able to click on the main menu item as well.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Welcome to shopify community.
Please share your store URL and if your store is password protected then please provide password too.
Thank you.
can you please send the header code!
@MeetShah
Welcome to Shopify Community.
follow this steps:
- Go to the Admin.
- navigate to theme
- then navigate to navigation
- Select your menu.
- And Add the link.
i hope this will be helpful. if you need any more help regarding this then let me know,
Thank you.
have already done that, but when i click on it, it shows the drop down menu and doesnt take me to the main link
Show More
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
<{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class=“header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper–border-bottom{% endif %}”>
{%- render ‘cart-notification’, color_scheme: section.settings.color_scheme -%}
{% javascript %}
class StickyHeader extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.header = document.getElementById(‘shopify-section-header’);
this.headerBounds = {};
this.currentScrollTop = 0;
this.preventReveal = false;
this.onScrollHandler = this.onScroll.bind(this);
this.hideHeaderOnScrollUp = () => this.preventReveal = true;
this.addEventListener(‘preventHeaderReveal’, this.hideHeaderOnScrollUp);
window.addEventListener(‘scroll’, this.onScrollHandler, false);
this.createObserver();
}
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 (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
requestAnimationFrame(this.hide.bind(this));
} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
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) {
requestAnimationFrame(this.reset.bind(this));
}
this.currentScrollTop = scrollTop;
}
hide() {
this.header.classList.add(‘shopify-section-header-hidden’, ‘shopify-section-header-sticky’);
this.closeMenuDisclosure();
this.closeSearchModal();
}
reveal() {
this.header.classList.add(‘shopify-section-header-sticky’, ‘animate’);
this.header.classList.remove(‘shopify-section-header-hidden’);
}
reset() {
this.header.classList.remove(‘shopify-section-header-hidden’, ‘shopify-section-header-sticky’, ‘animate’);
}
closeMenuDisclosure() {
this.disclosures = this.disclosures || this.header.querySelectorAll(‘details-disclosure’);
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 = shop.url | append: routes.search_url | append: “?q={search_term_string}” %}
{%- endif -%}
{% schema %}
{
“name”: “t:sections.header.name”,
“settings”: [
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.header.settings.color_scheme.options__1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.header.settings.color_scheme.options__2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.header.settings.color_scheme.options__3.label”
},
{
“value”: “background-2”,
“label”: “t:sections.header.settings.color_scheme.options__4.label”
},
{
“value”: “inverse”,
“label”: “t:sections.header.settings.color_scheme.options__5.label”
}
],
“default”: “background-1”,
“label”: “t:sections.header.settings.color_scheme.label”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “t:sections.header.settings.logo.label”
},
{
“type”: “range”,
“id”: “logo_width”,
“min”: 50,
“max”: 250,
“step”: 10,
“default”: 100,
“unit”: “t:sections.header.settings.logo_width.unit”,
“label”: “t:sections.header.settings.logo_width.label”
},
{
“type”: “select”,
“id”: “logo_position”,
“options”: [
{
“value”: “middle-left”,
“label”: “t:sections.header.settings.logo_position.options__1.label”
},
{
“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”
}
],
“default”: “middle-left”,
“label”: “t:sections.header.settings.logo_position.label”
},
{
“type”: “link_list”,
“id”: “menu”,
“default”: “main-menu”,
“label”: “t:sections.header.settings.menu.label”
},
{
“type”: “checkbox”,
“id”: “show_line_separator”,
“default”: true,
“label”: “t:sections.header.settings.show_line_separator.label”
},
{
“type”: “checkbox”,
“id”: “enable_sticky_header”,
“default”: true,
“label”: “t:sections.header.settings.enable_sticky_header.label”,
“info”: “t:sections.header.settings.enable_sticky_header.info”
}
]
}
{% endschema %}
awaiting your reply on solution
@KetanKumar awaiting reply
I want this answer as well
i have copy this code i can see missing code arrow are you sure this full code
were you ever able to solve this? I am having the exact same issue, thanks!
I still haven’t figured out out and have tried every workaround I could think of, unfortunately. No responses and z I’ve asked this question on 3 threads
The workaround I’ve just used today is to go into Snippets > menu.liquid and change:
<span {%- if link.child_active %} class=“header__active-menu-item”{% endif %}>{{ link.title | escape }}
to
<a {%- if link.child_active %} class=“header__active-menu-item”{% endif %} href=“{{ link.url }}”>{{ link.title | escape }}
This should make it so that clicking the text will navigate to the page, whereas clicking the arrow will collapse/expand the drop down area. It’s a good starting point and if you wanted to take it any further you should be able to do so with CSS once this is in!
Just to mention - there were two instances of this span in our menu.liquid, I changed both
Hello!
I tried your solution and it works on desktop, but do you know how to make it work on mobile ?
Kind regards,
Nadia
Hi I am having the same issue. Could you please explain how to fix it?
Excellent, I’ve been looking for a solution for this for a while now.
I’ve now found a solution within the forum which works on mobile too. Please go to:
Great help, thank you, works like a charm!
I used the following code, so the link didn’t turn blue:
This worked perfectly for me too, thanks for sharing! I did notice though, that I can now only hover on the homepage, on the other pages the hover is now longer available.
Any solution for this?
Many thanks in advance