How can I make a menu drawer background blurred and transparent on mobile?

Store Design
, , , ,
1

Hey everone,

I was wondering if it would be possible to make the background of the menu drawer blurred and transparent!
“mobile version”

Could you maybe help ? @PageFly-Kate : )

Thanks in advance

2

Hello @moehajje

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you.

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid theme file.

  3. Paste the below code before :

Result:

Screenshot at Feb 06 17-26-50.png
Screenshot at Feb 06 17-26-50.png389×845 53.5 KB

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

3

Thanks for your help, but as I see on the Pic you attached that it still looks the same.
I think the question wasn’t clear at all.

Here is an example showing what I mean:

IMG_0299.jpg
IMG_0299.jpg1284×1915 96.1 KB

4

@moehajje

You can add css to display the background for the drawer menu with the following css: (change the image link you want to use):
5

I tried a lot with it but didn’t work!
I think the idea of putting an image as a background on the menu drawer doesn’t work.

Maybe a CSS solution adjusting the transparency of the background of menu drawer ?

6

Hi @moehajje ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-menu-drawer.css->paste below code at the bottom of the file:

.menu-drawer {
    background: rgba(243,225,225,1);
background: -moz-linear-gradient(-45deg, rgba(243,225,225,1) 0%, rgba(255,255,255,1) 44%, rgba(243,225,225,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(243,225,225,1)), color-stop(44%, rgba(255,255,255,1)), color-stop(100%, rgba(243,225,225,1)));
background: -webkit-linear-gradient(-45deg, rgba(243,225,225,1) 0%, rgba(255,255,255,1) 44%, rgba(243,225,225,1) 100%);
background: -o-linear-gradient(-45deg, rgba(243,225,225,1) 0%, rgba(255,255,255,1) 44%, rgba(243,225,225,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(243,225,225,1) 0%, rgba(255,255,255,1) 44%, rgba(243,225,225,1) 100%);
background: linear-gradient(135deg, rgba(243,225,225,1) 0%, rgba(255,255,255,1) 44%, rgba(243,225,225,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e1e1', endColorstr='#f3e1e1', GradientType=1 );
}

I hope it would help you
Best regards,

Kate | PageFly

7

@PageFly-Kate

Thanks Kate again, but that doesn’t work this time
It makes it only white somehow and not blurry transparent.
You could check it out, I have applied it

8

Hi @moehajje ,

My code uses css Color gradient. If not, can you explain more clearly? Maybe I don’t really understand what you mean.
Thanks you!

9

Hey @PageFly-Kate ,

I have sent you a video showing exactly what I mean.

Thanks in advance

10

Hi @moehajje ,

Thanks you for reply.

You can replace previous code by below code in component-menu-drawer.css file:

.menu-drawer {
    background: rgba(255,255,255,.8) !important;
}

I hope it would help you
Best regards,

Kate | PageFly