Jump to content

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

Recommended Posts

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

 

1135689702_ScreenShot2020-06-29at16_04_38.thumb.png.94e4b6080549dd1b473461ff9765e1e9.png

Link to comment
  • Replies 7
  • Views 835
  • Created
  • Last Reply

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.

 

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.