Adding a clickable brand logo above my mobile menu overlay text items

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. Or is there a better way?

I've used tuanphan's code snippet, from below, like so...

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

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.

I've got my code working like so...

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

 

How do I add a linking image in there? - maybe javascript or something?

Can anyone help at all?

Thanks

Can you share link to your site? Some JavaScript can solve.

Hi tuan. Yes I shared on the other thread, but can share here too...

https://lwp-workinprogress.squarespace.com

Pwd: LWP-Glyn01

I've taken the above code out from the site at the moment (reverted to menu without the logo), as I wasn't getting much joy in fixing it. But basically I want it to work like the image above, with a clickable logo.

Thanks for the help.

 

Hi tuan,

Do you have the Javascript code at all, please?

Would be grateful for the help. Thanks

 

4 hours ago, JohnNightingale said:

Hi tuan,

Do you have the Javascript code at all, please?

Would be grateful for the help. Thanks

 

 

Sorry for the delay. I'm overloading.

I don't see logo. Did you solve?

Hi tuan,

I took out the code which places the logo as a background image above the text, as I wasn't able to fix it.

Is there a better way to have it as an actual clickable object above the text by writing it in with javascript in a div that creates the class or similar? Not sure.

If you need me to put the code back in, I can do, but was hoping for a better solution.

Thanks for your help. Really appreciate it.

You can insert with JavaScript, But it will take longer than making clicks for the code you have inserted

Thanks, but not really sure what you are meaning.

Should I put the CSS code back in again?

Thanks