Why is the drawer menu not visible on mobile after adding a css mask to my header?

Solved

Why is the drawer menu not visible on mobile after adding a css mask to my header?

McCarthyKP
Tourist
5 0 2

Hi! 

 

I recently added a scalloped border to my header via a css mask property on the header-wrapper in base.css as shown in the code below. This achieved what I wanted visually, but on mobile, the drawer menu is no longer visible.

 

Code:

.header-wrapper {
  --mask:
    radial-gradient(13.99px at 50% calc(100% - 19.20px),#000 99%,#0000 101%) calc(50% - 24px) 0/48px 100%,
    radial-gradient(13.99px at 50% calc(100% + 7.20px),#0000 99%,#000 101%) 50% calc(100% - 12px)/48px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  margin-bottom: -19px;
}

 

Before:

Screenshot 2023-04-12 150712.png

After:

Screenshot 2023-04-12 150721.png

Accepted Solution (1)
shreyhweb
Shopify Partner
633 111 115

This is an accepted solution.

@McCarthyKP 

 

Please replace your code with below code in you base.css file.

 

.section-header .header-wrapper {
--mask:
radial-gradient(13.99px at 50% calc(100% - 19.20px),#000 99%,#0000 101%) calc(50% - 24px) 0/48px 100%,
radial-gradient(13.99px at 50% calc(100% + 7.20px),#0000 99%,#000 101%) 50% calc(100% - 12px)/48px 100% repeat-x;
-webkit-mask: var(--mask);
mask: var(--mask);
margin-bottom: -19px;
}
.section-header.menu-open header-wrapper {
--mask: unset!important;
}

 

I hope menu drawer will working.

Let us know the result after adding the given code.

 

Thankyou 🙂

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com

View solution in original post

Replies 7 (7)

shreyhweb
Shopify Partner
633 111 115

@McCarthyKP 

 

give us the store URL then we will able to help you.

 

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
McCarthyKP
Tourist
5 0 2

Thank you! I DM'd you the url & password

shreyhweb
Shopify Partner
633 111 115

@McCarthyKP 

 

we will check it.

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
shreyhweb
Shopify Partner
633 111 115

This is an accepted solution.

@McCarthyKP 

 

Please replace your code with below code in you base.css file.

 

.section-header .header-wrapper {
--mask:
radial-gradient(13.99px at 50% calc(100% - 19.20px),#000 99%,#0000 101%) calc(50% - 24px) 0/48px 100%,
radial-gradient(13.99px at 50% calc(100% + 7.20px),#0000 99%,#000 101%) 50% calc(100% - 12px)/48px 100% repeat-x;
-webkit-mask: var(--mask);
mask: var(--mask);
margin-bottom: -19px;
}
.section-header.menu-open header-wrapper {
--mask: unset!important;
}

 

I hope menu drawer will working.

Let us know the result after adding the given code.

 

Thankyou 🙂

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
McCarthyKP
Tourist
5 0 2

Thank you so much! This did the trick 😄

shreyhweb
Shopify Partner
633 111 115

@McCarthyKP 

 

Our pleasure 🙂

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
deligorge
New Member
6 0 0

Hi, I am having a similar issue and adding this code to base.css file doesn't seem to work. When I add this code the header masks my dropdown menu like this -

 

Screenshot 2024-07-09 at 16.32.13.png

please help!