Adding logo and text to menu on mobile.

Hi,

Is it possible to add logo and text to the menu on mobile?

I am using Brine template.

Regards

Text: i think you canLogo: i'm not sure

Using custom code.You should share url to check. @Campcamp

https://marigold-onion-dm3a.squarespace.com/ @tuanphan

@Campcamp " add logo and text to the menu" what do you mean?

add logo above Title, and "menu" beside burger icon?

is it possible? Also to add e.g. text or cart into the menu? @tuanphan

can add logo/text, a bit complicatedcan't add cart@Campcamp

How could I do it? Can the text be added at the bottom of that menu and logo above aligned to the left?@tuanphan

@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;
}

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

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.

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

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

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?

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!!

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.

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!!

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

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.

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 🙂 

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 🙏

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)

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?