Jump to content

adding a background image to the mobile menu

Go to solution Solved by tuanphan,

Recommended Posts

  • Solution

Try adding to Home > Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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 ..

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Link to comment
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;}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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%

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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%;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
  • 8 months later...
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.

Screen Shot 2020-11-03 at 5.22.30 PM.png

Screen Shot 2020-11-03 at 5.22.41 PM.png

Link to comment
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
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

image.thumb.png.c1afd97561214190cf55163c0194d7ee.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.