Second logo to be clickable on site header

Site URL: https://butterfly-orb-5p9m.squarespace.com/config/pages

Hello,

I’ve used the code below to add a second logo ‘W’ to the site header. It works for desktop but the logo doesn’t appear on mobile. Also I want the second logo 'W' to be clickable and link to another website. Where do I place the website URL? Can you please help? 

//*Extra Header Logo*//

.header-actions::before {

  content:’’;

  display:inline-block;

  width:35px;

  height:35px;

  margin-left:20px;

background:url(“https://static1.squarespace.com/static/672c5dac6e112a35b7ed581b/t/6739e2faf7680b4cb6c76776/1731846906992/worimi-Turquoise-icon.png”) no-repeat 0 0; 

  background-size:100%;

}

Thank you muchly. 

Chris

Replace your existing CSS code with this:

/* Extra Header Logo - Second Logo */
.header-actions::before {
  content: '';
  display: inline-block; /* Ensure it displays properly */
  width: 35px;
  height: 35px;
  margin-left: 20px;
  background: url("https://static1.squarespace.com/static/672c5dac6e112a35b7ed581b/t/6739e2faf7680b4cb6c76776/1731846906992/worimi-Turquoise-icon.png") no-repeat center center;
  background-size: contain; /* Ensure the logo scales correctly */
  position: relative; /* Enable positioning */
}

/* Add hover effect for better UX */
.header-actions::before:hover {
  opacity: 0.8;
  cursor: pointer;
}

/* Ensure it shows on mobile */
@media (max-width: 768px) {
  .header-actions::before {
    display: inline-block;
  }
}

Add HTML for Clickable Link

To make the logo clickable, add the following HTML using Code Injection or by editing your header template if your Squarespace plan supports it.

1. Go to Pages>Web Tools> Code Injection.
2. Add the following code in the Header section:

   <a href="https://your-target-website.com" target="_blank" class="second-logo-link" aria-label="Visit W Logo Website">
     <style>
       .second-logo-link {
         position: absolute;
         width: 35px;
         height: 35px;
         top: 0; /* Adjust based on your header layout */
         left: 100px; /* Adjust to match the position of the logo */
         display: block;
       }
     </style>
   </a>

    

Hello Squareko,

Thank you for getting back to me. 

The first part of the CSS code worked. Unfortunately, the Clickable Link code didn't work when I pasted it in the Code Injection section. I think I'm putting the 'W" URL & image name in the wrong areas. Can you please instruct me on where they need to go?
The URL  is https://worimi.org.au/ & image name is https://static1.squarespace.com/static/672c5dac6e112a35b7ed581b/t/6739e2faf7680b4cb6c76776/1731846906992/worimi-Turquoise-icon.png” aria-label=”https://worimi.org.au

See my code:

<a href=”https://worimi.org.au” target=”_blank” class=”https://static1.squarespace.com/static/672c5dac6e112a35b7ed581b/t/6739e2faf7680b4cb6c76776/1731846906992/worimi-Turquoise-icon.png” aria-label=”https://worimi.org.au”>

  <style>

    .second-logo-link {

      position: absolute;

      width: 35px;

      height: 35px;

      top: 0;

      left: 100px; 

      display: block;

    }

  </style>

</a>

Thank you so much.

Chris

On 11/20/2024 at 6:54 AM, cck_chris said:

Hello Squareko,

Thank you for getting back to me. 

The first part of the CSS code worked. Unfortunately, the Clickable Link code didn't work when I pasted it in the Code Injection section. I think I'm putting the 'W" URL & image name in the wrong areas. Can you please instruct me on where they need to go?
The URL  is https://worimi.org.au/ & image name is https://static1.squarespace.com/static/672c5dac6e112a35b7ed581b/t/6739e2faf7680b4cb6c76776/1731846906992/worimi-Turquoise-icon.png” aria-label=”https://worimi.org.au

 

See my code:

 

<a href=”https://worimi.org.au” target=”_blank” class=”https://static1.squarespace.com/static/672c5dac6e112a35b7ed581b/t/6739e2faf7680b4cb6c76776/1731846906992/worimi-Turquoise-icon.png” aria-label=”https://worimi.org.au”>

  <style>

    .second-logo-link {

      position: absolute;

      width: 35px;

      height: 35px;

      top: 0;

      left: 100px; 

      display: block;

    }

  </style>

</a>

 

Thank you so much.

Chris

 

 

 

 

 

 

 

your quote is slanted, it should be vertical

"

Hello,

I've made the quotation marks straight (vertical), as suggested & the second logo is still not clickable. Please, please tell me what I'm doing wrong.

My code in Custom CSS:

/* Extra Header Logo - Second Logo */

.header-actions::before {

  content: ‘’;

  display: inline-block; /* Ensure it displays properly */

  width: 35px;

  height: 35px;

  margin-left: 20px;

  background: url("https://static1.squarespace.com/static/672c5dac6e112a35b7ed581b/t/6739e2faf7680b4cb6c76776/1731846906992/worimi-Turquoise-icon.png") no-repeat center center;

  background-size: contain; /* Ensure the logo scales correctly */

  position: relative; /* Enable positioning */

}

/* Add hover effect for better UX */

.header-actions::before:hover {

  opacity: 0.8;

  cursor: pointer;

}

/* Ensure it shows on mobile */

@media (max-width: 768px) {

  .header-actions::before {

    display: inline-block;

  }

}

My code in Code Injection:

<a href="https://worimi.org.au" target="_blank" class="https://static1.squarespace.com/static/672c5dac6e112a35b7ed581b/t/6739e2faf7680b4cb6c76776/1731846906992/worimi-Turquoise-icon.png" aria-label="https://worimi.org.au">
  <style>
    .second-logo-link {
      position: absolute;
      width: 35px;
      height: 35px;
      top: 0; 
      left: 100px; 
      display: block;
    }
  </style>
</a>

Many thanks

Chris

https://butterfly-orb-5p9m.squarespace.com/?noredirect

@cck_chris you need second logo appears on right of current logo or which position? Current I don't see second logo

Bugger, I forgot  I removed the second logo (W logo) over the weekend because it wasn't clickable. Tonight I tried placing it back in but the code isn't working for me. Then I uploaded a new W logo & pasted the new image name in - "https://static1.squarespace.com/static/672c5dac6e112a35b7ed581b/t/67446bc1e9f71659bf107a53/1732537281714/worimi-Turquoise-icon.png".
My W logo isn't appearing on the site header now using the code below. See visual above of how my site header should look like.

/* Extra Header Logo - Second Logo */
.header-actions::before {
  content: '';
  display: inline-block; /* Ensure it displays properly */
  width: 35px;
  height: 35px;
  margin-left: 20px;
  background: url("https://static1.squarespace.com/static/672c5dac6e112a35b7ed581b/t/67446bc1e9f71659bf107a53/1732537281714/worimi-Turquoise-icon.png") no-repeat center center;
  background-size: contain; /* Ensure the logo scales correctly */
  position: relative; /* Enable positioning */
}

/* Add hover effect for better UX */
.header-actions::before:hover {
  opacity: 0.8;
  cursor: pointer;
}

/* Ensure it shows on mobile */
@media (max-width: 768px) {
  .header-actions::before {
    display: inline-block;
  }
}

Many thanks 

Chris

Hello,

I’m unable to get the W logo to appear on the site header, even though it was working last week. So I think it’s best if I start from scratch.

This is how I want the site header to look like.  The second logo (W logo) to be clickable on desktop & mobile & link to this website https://worimi.org.au/

I have added a new version of the W logo to Custom CSS. 
"https://static1.squarespace.com/static/672c5dac6e112a35b7ed581b/t/67452f522df26544d39e4fdc/1732587346428/worimi-icon.png"

Could you please assist me with resolving this issue?

Many Thanks
Chris 

On 11/26/2024 at 9:25 AM, cck_chris said:

Hello,

I’m unable to get the W logo to appear on the site header, even though it was working last week. So I think it’s best if I start from scratch.

 

This is how I want the site header to look like.  The second logo (W logo) to be clickable on desktop & mobile & link to this website https://worimi.org.au/

I have added a new version of the W logo to Custom CSS. 
"https://static1.squarespace.com/static/672c5dac6e112a35b7ed581b/t/67452f522df26544d39e4fdc/1732587346428/worimi-icon.png"

Could you please assist me with resolving this issue?

Many Thanks
Chris 

 

You can use this code to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('<a class="second-logo" target="_blank" href="https://worimi.org.au/"><img src="https://static1.squarespace.com/static/672c5dac6e112a35b7ed581b/t/67452f522df26544d39e4fdc/1732587346428/worimi-icon.png">').prependTo('.header-actions.header-actions--right');
});
</script>
<style>
  a.second-logo img {
    width: 50px;
}
</style>

On 11/28/2024 at 7:14 PM, tuanphan said:

You can use this code to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('<a class="second-logo" target="_blank" href="https://worimi.org.au/"><img src="https://static1.squarespace.com/static/672c5dac6e112a35b7ed581b/t/67452f522df26544d39e4fdc/1732587346428/worimi-icon.png">').prependTo('.header-actions.header-actions--right');
});
</script>
<style>
  a.second-logo img {
    width: 50px;
}
</style>

 

Hello tuanphan, 

You’re amazing—it worked! On desktop, the logo is clickable and redirects to the website. However, it doesn’t appear in the mobile menu. How can I make it visible there as well?

Chris

On 12/2/2024 at 5:03 PM, cck_chris said:

Hello tuanphan, 

You’re amazing—it worked! On desktop, the logo is clickable and redirects to the website. However, it doesn’t appear in the mobile menu. How can I make it visible there as well?

Chris

On mobile, it should be on left of burger icon, or under Contact item?

On 12/4/2024 at 12:38 AM, tuanphan said:

On mobile, it should be on left of burger icon, or under Contact item?

Under Contact, please.   😊

Chris