How can I adjust the opacity of a Mega Menu in the Icon theme?

Technical Q&A
1

I’m trying to give my client access to change the opacity of a Mega Menu on the Icon theme, I noticed that if I use a color picker it gives them an HTML Hex Color Code output but no option for opacity.

If I give them a range option for the opacity it just covers the whole div/mega menu not just the background (obviously).

Anyone have a workaround for this?

2

Maybe try working with this:
https://help.shopify.com/en/themes/liquid/filters/color-filters#color_modify

That link has this:

{{ ‘#7ab55c’ | color_modify: ‘alpha’, 0.85 }}

I’m not sure if this will work, but it’s worth a try (changing ‘bgcolor’ and ‘opacity’ to whatever input IDs you’re using, of course):
{{ section.settings.bgcolor | color_modify: ‘alpha’, section.settings.opacity }}

6 Likes
3

@CarlosFD @mroberts-hawke

For that case, you need to create two schema settings and merge them into one using this code.

{{ '#7ab55c' | color_modify: 'alpha', 0.85 }}

It is just an idea of how Shopify runs color using customization. You need to apply code as per your requirement. If you need any help then let me know.

1 Like
4

Transparency is controlled by the alpha channel (AA in #AARRGGBB). Maximal value (255 dec, FF hex) means fully opaque. Minimum value (0 dec, 00 hex) means fully transparent. Values in between are semi-transparent, i.e. the color is mixed with the background color.

To get a fully transparent color code set the alpha to zero. RR, GG and BB are irrelevant in this case because no color will be visible. This means #00FFFFFF (“transparent White”) is the same color as #00F0F8FF (“transparent AliceBlue”). To keep it simple one chooses black (#00000000) or white (#00FFFFFF) if the color does not matter.

5

Just backspace in the color code section until everything is deleted. It should automatically say transparent.

1 Like