RubenAlza Posted November 9, 2019 Share Posted November 9, 2019 is it possible to add a background image to the menu mobile display? Link to comment
tuanphan Posted November 10, 2019 Share Posted November 10, 2019 Yes. You can. Can you share link to your site? 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
RubenAlza Posted November 10, 2019 Author Share Posted November 10, 2019 3 hours ago, tuanphan said: Yes. You can. Can you share link to your site? thank you, this is my site: rubenalza.com Link to comment
Solution tuanphan Posted November 10, 2019 Solution Share Posted November 10, 2019 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
RubenAlza Posted November 10, 2019 Author Share Posted November 10, 2019 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. Link to comment
tuanphan Posted November 10, 2019 Share Posted November 10, 2019 (edited) 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 November 10, 2019 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
RubenAlza Posted November 10, 2019 Author Share Posted November 10, 2019 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
tuanphan Posted November 10, 2019 Share Posted November 10, 2019 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
RubenAlza Posted November 10, 2019 Author Share Posted November 10, 2019 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? Link to comment
tuanphan Posted November 11, 2019 Share Posted November 11, 2019 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
RubenAlza Posted November 11, 2019 Author Share Posted November 11, 2019 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? Link to comment
tuanphan Posted November 11, 2019 Share Posted November 11, 2019 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
RubenAlza Posted November 11, 2019 Author Share Posted November 11, 2019 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 comment
SlavicaVCalandra Posted February 27, 2020 Share Posted February 27, 2020 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 Link to comment
gogreenmsu Posted November 3, 2020 Share Posted November 3, 2020 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. Link to comment
tuanphan Posted November 4, 2020 Share Posted November 4, 2020 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 } gogreenmsu 1 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
gogreenmsu Posted November 4, 2020 Share Posted November 4, 2020 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! lara_e 1 Link to comment
tuanphan Posted November 6, 2020 Share Posted November 6, 2020 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? 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
gogreenmsu Posted November 6, 2020 Share Posted November 6, 2020 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. Link to comment
tuanphan Posted November 6, 2020 Share Posted November 6, 2020 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; } } gogreenmsu 1 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
gogreenmsu Posted November 6, 2020 Share Posted November 6, 2020 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment