Guest Posted September 20, 2019 Share Posted September 20, 2019 (edited) Hi, Is it possible to add logo and text to the menu on mobile? I am using Brine template. Regards Edited September 20, 2019 by Campcamp Initial Revision Link to comment
tuanphan Posted September 20, 2019 Share Posted September 20, 2019 Text: i think you canLogo: i'm not sure Using custom code.You should share url to check. @Campcamp 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
Guest Posted September 21, 2019 Share Posted September 21, 2019 https://marigold-onion-dm3a.squarespace.com/ @tuanphan Link to comment
tuanphan Posted September 21, 2019 Share Posted September 21, 2019 @Campcamp " add logo and text to the menu" what do you mean? add logo above Title, and "menu" beside burger icon? 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
Guest Posted September 21, 2019 Share Posted September 21, 2019 (edited) is it possible? Also to add e.g. text or cart into the menu? @tuanphan Edited September 21, 2019 by Campcamp Initial Revision Link to comment
tuanphan Posted September 21, 2019 Share Posted September 21, 2019 can add logo/text, a bit complicatedcan't add cart@Campcamp 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
Guest Posted September 21, 2019 Share Posted September 21, 2019 How could I do it? Can the text be added at the bottom of that menu and logo above aligned to the left?@tuanphan Link to comment
tuanphan Posted September 22, 2019 Share Posted September 22, 2019 @Campcamp add to Home > Design > Custom CSS nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary:after { display: block; content: "Text"; } nav.Mobile-overlay-nav.Mobile-overlay-nav--primary:before { display: block; content: ""; background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/sonora-squarespace.jpg); width: 200px; height: 200px; margin: 0 auto; } 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
JohnNightingale Posted June 29, 2020 Share Posted June 29, 2020 Hi, I'm looking to add my site logo into my mobile menu overlay and make this a clickable item (so it goes to the homepage). I think I'm halfway there, but I can't work out what I need to do next. I've got tuanphan's code snippet above nav.Mobile-overlay-nav.Mobile-overlay-nav--primary:before to get the logo into the top of my menu, but can't work out how or where to add in the part that will make it a link. I'm thinking this needs to be added into a code injection somewhere as html, but not quite sure and feeling a bit stuck. Can anyone help at all? Thanks Link to comment
tuanphan Posted June 30, 2020 Share Posted June 30, 2020 16 hours ago, JohnNightingale said: Hi, I'm looking to add my site logo into my mobile menu overlay and make this a clickable item (so it goes to the homepage). I think I'm halfway there, but I can't work out what I need to do next. I've got tuanphan's code snippet above nav.Mobile-overlay-nav.Mobile-overlay-nav--primary:before to get the logo into the top of my menu, but can't work out how or where to add in the part that will make it a link. I'm thinking this needs to be added into a code injection somewhere as html, but not quite sure and feeling a bit stuck. Can anyone help at all? Thanks Hi. Can you share link? I can check easier. 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
JohnNightingale Posted June 30, 2020 Share Posted June 30, 2020 Hi Tuan, Thanks for looking. URL below...https://lwp-workinprogress.squarespace.com pw: LWP-Glyn01 I've looked around for an answer and not really finding anything useful. The code I have so far to customise the mobile menu overlay is as follows: Quote .Mobile-overlay-menu { width: 100%; z-index: 1; } .Mobile-overlay-menu-main { padding: 0px 36px 36px 36px !important; } .Mobile-overlay-nav--primary { margin-top:20px; } .Mobile-overlay-nav--primary:before { display: block; content: ""; background-image: url(https://images.squarespace-cdn.com/content/5ec3a27c7f0be537de917698/1589880645769-9UTHT4U8JK075AQGZXTO/LWP-sqlogo-fullcol%402x.png?content-type=image%2Fpng); background-position: top; background-size: 100% auto; background-repeat: no-repeat; width: 80px; height: 80px; margin: 0px 0px 40px 0px; } .Mobile-overlay-close { padding: 46px 38px; } But is there a better way to put the linking image in there - maybe javascript or something? Thanks again Link to comment
JohnNightingale Posted July 1, 2020 Share Posted July 1, 2020 I've had to remove the experimenting I was doing, as I can't get this to work. Thanks, if you were looking. If any advice, then I really appreciate it - thanks Link to comment
tuanphan Posted August 24, 2020 Share Posted August 24, 2020 On 7/1/2020 at 4:32 PM, JohnNightingale said: I've had to remove the experimenting I was doing, as I can't get this to work. Thanks, if you were looking. If any advice, then I really appreciate it - thanks Have you found the solution yet? 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
AmandaMichele Posted October 13, 2020 Share Posted October 13, 2020 (edited) I was looking for this everywhere and I think I figured it out with a little bit of js. If you have your logo visible and linked to home on desktop, adding this script to header element in code injections worked for me. I'm using Brine. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> Y.on('domready', function(){ var mobileLogo = Y.one(".Header-branding").cloneNode(true).addClass('mobile-logo'); Y.one(".Mobile-overlay-menu-main").prepend(mobileLogo); }); </script> I'm know very little js so if someone has a cleaner answer, I'm open to it. I just couldn't find a solution ANYWHERE so thought I would jump in. Hope it helps!! Edited October 13, 2020 by AmandaMichele snicholls 1 Link to comment
creedon Posted October 13, 2020 Share Posted October 13, 2020 48 minutes ago, AmandaMichele said: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> Unless I'm mistaken you can drop the above line from your code. The code that follows after that line does not need it. Unless you are using jQuery code elsewhere that we cant see here. The second script tag is using the YUI library. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
AmandaMichele Posted October 13, 2020 Share Posted October 13, 2020 10 hours ago, creedon said: Unless I'm mistaken you can drop the above line from your code. The code that follows after that line does not need it. Unless you are using jQuery code elsewhere that we cant see here. The second script tag is using the YUI library. Good to know! Thank you!! Link to comment
nmbenson1 Posted March 20 Share Posted March 20 Hi @creedon I am looking to accomplish this on my mobile menu as well and was wondering if you knew how to center it vs left align? site: mwlit.com PW: press spacebar Link to comment
creedon Posted March 20 Share Posted March 20 32 minutes ago, nmbenson1 said: I am looking to accomplish this on my mobile menu as well and was wondering if you knew how to center it vs left align? Add the following to Design > Custom CSS. /* header logo mobile center */ .has-logo-image .Header-branding { display : flex; justify-content : center; } Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
nmbenson1 Posted March 20 Share Posted March 20 (edited) Hey @creedon thanks for the quick response that worked in the preview but it's not appearing when I test it by visiting the site. I will keep trying! Thanks again for the help 🙂 Edited March 20 by nmbenson1 Link to comment
Rolaa Posted March 28 Share Posted March 28 Uh, ohhh, I also didn't have my logo showing in mobile menu on Impact (Brine family) site. This code worked, YAY: <!-- Adding logo to mobile menu --> <script> Y.on('domready', function(){ var mobileLogo = Y.one(".Header-branding").cloneNode(true).addClass('mobile-logo'); Y.one(".Mobile-overlay-menu-main").prepend(mobileLogo); }); </script> Help: How can I now centre my logo and give more space between my logo and the menu? My site is: https://www.thecarolamoon.com Thank you 🙏 Link to comment
nmbenson1 Posted March 31 Share Posted March 31 Hi @Rolaa awesome! That code is working for me as well, thank you! I am stuck on trying to move the menu links downward / adjust the logo size. It's currently sitting right on top of the first link and looks a little clunky. Have you had any luck with adjusting yours? cc @creedon site:mwlit pw: (press spacebar) Link to comment
tuanphan Posted April 5 Share Posted April 5 On 3/31/2023 at 10:01 PM, nmbenson1 said: Hi @Rolaa awesome! That code is working for me as well, thank you! I am stuck on trying to move the menu links downward / adjust the logo size. It's currently sitting right on top of the first link and looks a little clunky. Have you had any luck with adjusting yours? cc @creedon site:mwlit pw: (press spacebar) What is site url? 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
daniellenoakes Posted August 24 Share Posted August 24 is there code to add extra text to the overlay menu for 7.1? thanks 🙂 Link to comment
tuanphan Posted August 27 Share Posted August 27 On 8/24/2023 at 10:02 PM, daniellenoakes said: is there code to add extra text to the overlay menu for 7.1? thanks 🙂 Yes. You want to add above menu items, under menu items, above social icons or which position? And which text? Static text or text with links? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment