Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
JohnNightingale

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

Question

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

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 0

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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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.

 

Share this post


Link to post
  • 0
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?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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.

 

Share this post


Link to post
  • 0

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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...