adding a background image to the mobile menu

is it possible to add a background image to the menu mobile display?

Yes. You can. Can you share link to your site?

3 hours ago, tuanphan said:

Yes. You can. Can you share link to your site?

thank you, this is my site: rubenalza.com

Try adding to Home > Design > Custom CSS

.Mobile-overlay-menu {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/10/Slash.png);
}

2 minutes ago, tuanphan said:

Try adding to Home > Design > Custom CSS

.Mobile-overlay-menu {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/10/Slash.png);
}

 

it changed to a blue background.

6 minutes ago, RubenAlza said:

it changed to a blue background.

 

 

It is image, not color. Just replace image url in my code.

Also I could not find a solution to the black part. Maybe you can make it transparent ... or ..

36 minutes ago, tuanphan said:

It is image, not color. Just replace image url in my code.

Also I could not find a solution to the black part. Maybe you can make it transparent ... or ..

thank you. it worked but yeah that black strip still over it.
i'll try to find a way to make it transparent

23 minutes ago, RubenAlza said:

thank you. it worked but yeah that black strip still over it.
i'll try to find a way to make it transparent

try

.is-mobile-overlay-active .Mobile-overlay {background: transparent;}

4 hours ago, tuanphan said:

try

.is-mobile-overlay-active .Mobile-overlay {background: transparent;}

 

thanks but now it has a blank space under the x as shown here
do you know how to have it fill the whole space with the same image?

3 hours ago, RubenAlza said:

thanks but now it has a blank space under the x as shown here
do you know how to have it fill the whole space with the same image?

 

Your site is private....I guess maybe we should increase mobile menu with to 100%

1 minute ago, tuanphan said:

Your site is private....I guess maybe we should increase mobile menu with to 100%

sorry, bad habit. available now.

100% on the code?

4 minutes ago, RubenAlza said:

sorry, bad habit. available now.

100% on the code?

button.Mobile-overlay-close {
    position: relative;
    z-index: 10000;
    background: Transparent !important;
}
.Mobile-overlay-menu {
    width: 100%;
}

1 minute ago, tuanphan said:

button.Mobile-overlay-close {
    position: relative;
    z-index: 10000;
    background: Transparent !important;
}
.Mobile-overlay-menu {
    width: 100%;
}

 

thank you so much for all your help!!!!
 

Hi I would like to know what size image you would suggest to get the image looking sharp for the bg on the mobile nav, i have used your code but it seems to be blurry

On 11/10/2019 at 10:35 AM, tuanphan said:

Try adding to Home > Design > Custom CSS

.Mobile-overlay-menu {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/10/Slash.png);
}

 

Hi Tuanphan,

I tried this but it did not work for me. Any suggestions?

Site: www.takebackyourcareerpodcast.com

Password: boots135

The purple color is set from the Colors picker.

16 hours ago, gogreenmsu said:

Hi Tuanphan,

I tried this but it did not work for me. Any suggestions?

Site: www.takebackyourcareerpodcast.com

Password: boots135

The purple color is set from the Colors picker.

.header-menu-bg.theme-bg--primary {
    background: url(https://static1.squarespace.com/static/5f69447dc6605c1f7a7ec913/t/5fa2b6bbfedf2122feac84ad/1604499132048/Mobile+Menu+Background2.png);
    background-size: cover;
    background-position: center
}

2 hours ago, tuanphan said:

.header-menu-bg.theme-bg--primary {
    background: url(https://static1.squarespace.com/static/5f69447dc6605c1f7a7ec913/t/5fa2b6bbfedf2122feac84ad/1604499132048/Mobile+Menu+Background2.png);
    background-size: cover;
    background-position: center
}

 

Perfect; thank you as always for your help!

On 11/5/2020 at 12:24 AM, gogreenmsu said:

Perfect; thank you as always for your help!

Tablet a bit narrow. Do you want to increase width on tablet?

35 minutes ago, tuanphan said:

Tablet a bit narrow. Do you want to increase width on tablet?

That would be ideal, yes! I don't have a tablet to look at the site and I don't see a tablet view on Squarespace anymore.

13 minutes ago, gogreenmsu said:

That would be ideal, yes! I don't have a tablet to look at the site and I don't see a tablet view on Squarespace anymore.

Add to Home > Design > Custom CSS

/* Monday should suck tablet */
@media screen and (min-width:768px) and (max-width:991px) {
.homepage #page section:nth-child(2) .content {
    width: 100% !important;
}
}

1 hour ago, tuanphan said:

Add to Home > Design > Custom CSS

/* Monday should suck tablet */
@media screen and (min-width:768px) and (max-width:991px) {
.homepage #page section:nth-child(2) .content {
    width: 100% !important;
}
}

 

Added; thank you very much 🙂