Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

adding a background image to the mobile menu


RubenAlza
Go to solution Solved by tuanphan,

Question

  • Answers 20
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Perfect; thank you as always for your help!

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%

Posted Images

20 answers to this question

Recommended Posts

  • 1

Try adding to Home > Design > Custom CSS

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

 

Link to post
  • 0
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.

 

aaa.png

Link to post
  • 0
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
Link to post
  • 0
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 post
  • 0
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;}

 

Link to post
  • 0
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?

f.png

Link to post
  • 0
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%

Link to post
  • 0
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%;
}

 

Link to post
  • 0
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!!!!
 

Link to post
  • 0
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 post
  • 0
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
}

 

Link to post
  • 0
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!

Link to post
  • 0
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

Link to post
  • 0
35 minutes ago, tuanphan said:

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

image.thumb.png.c1afd97561214190cf55163c0194d7ee.png

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.

Link to post
  • 0
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;
}
}

 

Link to post
  • 0
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 🙂

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...