Solved

menu not appearing on mobile

princefizz
Tourist
4 0 2

hello,

on mobile, my site has a button to drop-down the menu, but clicking it does nothing

here is the site: https://princefizz.myshopify.com

password is lawpea

any advice is appreciated

Accepted Solution (1)

tim
Shopify Expert
3485 284 1292

This is an accepted solution.

 

You'd need to modify 2 files:

  • assets/component-menu-drawer.css -- find this:

 

.js .menu-drawer {
  height: calc(100vh - 100%);
  height: calc(
    var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%))
  );
}

 

and replace it with this:

 

.js .menu-drawer {
  height: calc(var(--viewport-height, 100vh) - var(--header-bottom-position, 150px));
  top: var(--header-bottom-position, 150px);
}

 

 

  • assets/global.js: -- find this (line 418?)

 

 this.borderOffset = this.borderOffset || this.closest(".header-wrapper").classList.contains("header-wrapper--border-bottom") ? 1 : 0,

 

and modify it by adding a question mark like this:

 

 this.borderOffset = this.borderOffset || this.closest(".header-wrapper")?.classList.contains("header-wrapper--border-bottom") ? 1 : 0,

 

 

This should fix your problem.

Screenshot 2024-04-18 at 3.26.54 pm.png

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Replies 2 (2)

tim
Shopify Expert
3485 284 1292

This is an accepted solution.

 

You'd need to modify 2 files:

  • assets/component-menu-drawer.css -- find this:

 

.js .menu-drawer {
  height: calc(100vh - 100%);
  height: calc(
    var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%))
  );
}

 

and replace it with this:

 

.js .menu-drawer {
  height: calc(var(--viewport-height, 100vh) - var(--header-bottom-position, 150px));
  top: var(--header-bottom-position, 150px);
}

 

 

  • assets/global.js: -- find this (line 418?)

 

 this.borderOffset = this.borderOffset || this.closest(".header-wrapper").classList.contains("header-wrapper--border-bottom") ? 1 : 0,

 

and modify it by adding a question mark like this:

 

 this.borderOffset = this.borderOffset || this.closest(".header-wrapper")?.classList.contains("header-wrapper--border-bottom") ? 1 : 0,

 

 

This should fix your problem.

Screenshot 2024-04-18 at 3.26.54 pm.png

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
princefizz
Tourist
4 0 2

thank you so much for your help!