Jump to content

adding a background image to the mobile menu

Recommended Posts

  • Replies 20
  • Views 3.4k
  • Created
  • Last Reply
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 ..

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.