Hello,
After adding an Order Tracking button on Header to the site’s code, I noticed that the dropdown menu stopped working. In the customize configuration, it remains on, but it does not work when a mouse hover over it. I don’t know what codes I need to send to you so you can help me.
- header.liquid
{%- capture section_settings -%}
{
"navigationLayout": {{ section.settings.desktop_navigation_layout | json }},
"desktopOpenTrigger": {{ section.settings.desktop_navigation_open_trigger | json }},
"useStickyHeader": {{ section.settings.enable_sticky_header | json }}
}
{%- endcapture -%}
{%- assign navigation_menu_handle = section.settings.navigation_menu | default: 'main-menu' -%}
{%- assign navigation_menu = linklists[navigation_menu_handle] -%}
{% schema %}
{
"name": "Header",
"class": "shopify-section__header",
"settings": [
{
"type": "checkbox",
"id": "enable_sticky_header",
"label": "Enable sticky header",
"default": true
},
{
"type": "header",
"content": "Logo"
},
{
"type": "image_picker",
"id": "logo",
"label": "Image",
"info": "200 x 60px .png recommended"
},
{
"type": "range",
"id": "logo_max_width",
"min": 50,
"max": 300,
"step": 5,
"unit": "px",
"label": "Image width",
"default": 140
},
{
"type": "range",
"id": "mobile_logo_max_width",
"min": 50,
"max": 170,
"step": 5,
"unit": "px",
"label": "Mobile image width",
"default": 100
},
{
"type": "header",
"content": "Language selector",
"info": "To add a language, go to your [language settings.](/admin/settings/languages)"
},
{
"type": "checkbox",
"id": "show_locale_selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Currency selector",
"info": "To add a currency, go to your [payment settings.](/admin/settings/payments)"
},
{
"type": "checkbox",
"id": "show_currency_selector",
"label": "Show currency selector",
"default": true
},
{
"type": "header",
"content": "Navigation"
},
{
"type": "link_list",
"id": "navigation_menu",
"label": "Menu",
"default": "main-menu"
},
{
"type": "select",
"id": "desktop_navigation_layout",
"label": "Desktop layout",
"options": [
{
"value": "condensed",
"label": "Condensed"
},
{
"value": "inline",
"label": "Inline"
}
],
"default": "condensed"
},
{
"type": "select",
"id": "desktop_navigation_open_trigger",
"label": "Open dropdown on...",
"options": [
{
"value": "hover",
"label": "Hover"
},
{
"value": "click",
"label": "Click"
}
],
"default": "hover"
},
{
"type": "header",
"content": "Mobile navigation"
},
{
"type": "checkbox",
"id": "show_navigation_social_media",
"label": "Show social media",
"default": true
},
{
"type": "text",
"id": "navigation_phone_number",
"label": "Phone number text",
"default": "Call us 000-000-0000"
},
{
"type": "text",
"id": "navigation_email",
"label": "Email",
"default": "info@yourwebsite.com"
},
{
"type": "header",
"content": "Search"
},
{
"type": "checkbox",
"id": "show_condensed_search",
"label": "Minimise search on mobile",
"default": true
},
{
"type": "checkbox",
"id": "show_search_filter",
"label": "Show search filter",
"default": true,
"info": "Refine by product type. [Learn more](https://support.maestrooo.com/article/184-navigation-filtering-search-results-by-product-type)"
},
{
"type": "link_list",
"id": "search_menu",
"label": "Quick links menu",
"info": "Show quick links when the user hasn't type anything. This menu won't show dropdown items."
},
{
"type": "checkbox",
"id": "show_search_menu_title",
"label": "Show quick links title",
"default": true
}
],
"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](https://support.maestrooo.com/article/180-navigation-enabling-and-configuring-mega-navigation)."
},
{
"type": "header",
"content": "Image 1"
},
{
"type": "image_picker",
"id": "image_1",
"label": "Image",
"info": "600 x 400px .jpg recommended"
},
{
"type": "text",
"id": "image_1_heading",
"label": "Heading",
"default": "Your image"
},
{
"type": "text",
"id": "image_1_text",
"label": "Text",
"default": "Tell your story"
},
{
"type": "url",
"id": "image_1_link",
"label": "Link"
},
{
"type": "header",
"content": "Image 2"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Image",
"info": "600 x 400px .jpg recommended"
},
{
"type": "text",
"id": "image_2_heading",
"label": "Heading",
"default": "Your image"
},
{
"type": "text",
"id": "image_2_text",
"label": "Text",
"default": "Tell your story"
},
{
"type": "url",
"id": "image_2_link",
"label": "Link"
}
]
}
]
}
{% endschema %}
- theme.css
* --------------------------------------------------------------------
* DROPDOWN MENU
* --------------------------------------------------------------------
*/
.nav-dropdown {
position: absolute;
top: 100%;
padding: 16px 0;
list-style: none;
background: var(--secondary-background);
color: var(--text-color);
border-radius: 0 0 3px 3px;
border: 1px solid var(--border-color);
white-space: nowrap;
visibility: hidden;
opacity: 0;
z-index: 1;
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.nav-dropdown:not(.nav-dropdown--floating) {
left: -15px;
}
.nav-dropdown--floating {
margin-top: 7px;
border: none;
border-radius: 3px;
}
.nav-dropdown--floating::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.1), 5px 0 5px -2px rgba(0, 0, 0, 0.1), 0 -5px 5px -2px rgba(0, 0, 0, 0.1);
z-index: -1;
}
.nav-dropdown--glued:not(.nav-dropdown--inverse) {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.nav-dropdown--glued.nav-dropdown--inverse {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.nav-dropdown--fixed {
min-height: 420px;
}
.nav-dropdown--restrict {
max-height: calc(100vh - 0px - 0px - 40px);
max-height: calc(100vh - var(--header-height, 0px) - var(--announcement-bar-height, 0px) - 40px);
overflow: auto;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
}
/* We have a way to set a max height for browsers supporting CSS variables */
@supports (--css: variables) {
.nav-bar .nav-dropdown .nav-dropdown {
max-height: calc(100vh - 0px - 40px);
max-height: calc(100vh - var(--distance-to-top, 0px) - 40px);
overflow: auto;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
}
}
.nav-dropdown[aria-hidden=false] {
visibility: visible;
opacity: 1;
}
.nav-dropdown .icon--nav-triangle-borderless {
position: absolute;
bottom: 100%;
left: 16px;
width: 20px;
height: 9px;
z-index: 1;
}
.nav-dropdown .icon--nav-triangle-left {
position: absolute;
top: 23px;
right: 100%;
height: 20px;
width: 9px;
z-index: 1;
}
.nav-dropdown__item:not(.has-mega-menu) {
position: relative;
}
.nav-dropdown__link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2px 60px 2px 20px;
cursor: pointer;
}
.nav-dropdown__link svg {
position: relative;
width: 8px;
height: 12px;
top: 1px;
margin: 0 -40px 0 65px;
}
.nav-dropdown__link[aria-expanded=true] {
color: var(--accent-color);
}
/* Handle sub-levels */
.nav-dropdown .nav-dropdown {
left: 100%;
top: -17px; /* 16px + 1px of border */
margin-top: 0;
min-width: 0;
border-radius: 0 3px 3px 0;
}
.nav-dropdown--inverse .nav-dropdown {
right: 100%;
left: auto;
border-radius: 3px 0 0 3px;
}
.nav-dropdown--inverse .nav-dropdown .icon--nav-triangle-left {
right: auto;
left: 100%;
transform: rotateZ(180deg);
}
.nav-dropdown .nav-dropdown--floating {
top: -16px; /* floating dropdown do not have border so there is one less pixel */
border-left: 1px solid var(--border-color);
}