To make the mobile menu parent links bigger

In header-drawer.liquid, replace the followings:

.menu-drawer__menu-item--parent {

font-family: var(--menu-parent-font-family);

font-style: var(--menu-parent-font-style);

font-weight: var(--menu-parent-font-weight);

font-size: var(--menu-parent-font-size);

line-height: var(--menu-parent-font-line-height);

text-transform: var(--menu-parent-font-case);

color: var(--menu-parent-font-color);

&:hover {

color: var(--menu-parent-font-color);

}

}

to

.menu-drawer__menu-item--parent {

font-family: var(--menu-parent-font-family);

font-style: var(--menu-parent-font-style);

font-weight: var(--menu-parent-font-weight);

{% comment %}font-size: var(--menu-parent-font-size); {% endcomment %}

font-size: var(--menu-top-level-font-size);

line-height: var(--menu-parent-font-line-height);

text-transform: var(--menu-parent-font-case);

color: var(--menu-parent-font-color);

&:hover {

color: var(--menu-parent-font-color);

}

}

• Related Articles

• Make parent link clickable

  Snippets > header-mega-menu.liquid (l.19-25) Parentlink {%- assign parentlink = link.links[0] -%} <a href="{{ parentlink.url }}" title="{{ parentlink.title }}"> <span {%- if link.child_active %} class="header__active-menu-item" {% endif %} > {{- ...

• Hide mega menu links that contain 0 product

  Add the following in the mega-menu-list.liquid {% for childLink in link.links %} {% if link.type == 'collection_link' %} {% assign collection = link.object %} {% if collection.products_count > 0 %} {% assign break_after_modulo = forloop.index | ...

• Make mega menu show only collection that consist of products

  In header-mega-menu.liquid and header-drawer.liquid, add the followings: {%- if childlink.object and childlink.object.products_count == 0 -%} {%- continue -%} {%- endif -%} and {%- if grandchildlink.object and grandchildlink.object.products_count == ...

• Removing country/selector from mobile drawer menu

  From your Shopify admin dashboard, click on "Online Store" and then "Themes". Find the theme that you want to edit and click on "Actions" and then "Edit code". In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on ...

• Make mega menu list scrollable (overflow)

  At the header section, add the following css .mega-menu { max-height: 70vh; overflow-y: auto; }