Jump to content

Please help - I wish to put an image in the left side of my header to act like a second logo.

Recommended Posts

Hello, 

I am trying to add an image as a second 'logo' to my site header on the left side. The text version of the logo is in the centre above the navigation links. 

 

I would like this image/logo to be clickable if possible, in that it acts as a link to the homepage.

 

The pages on my website have either black or white background, and I like that the header text changes colour.  It would also be great if the image logo changed colour in this way. Is that possible?

 

Thank you!

Link to comment
  • Replies 3
  • Views 338
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Thank you! I managed to insert the image into the header using Custom CSS using the following code. 

.header-title-nav-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .header-title-nav-wrapper::before {
    content: '';
    display: inline-block;
    width: 180px;
    height: 170px;
    background: url("https://static1.squarespace.com/static/66430f73c6d51e60b08068ba/t/6660cd2735ccae378c1597ea/1717620007904/Header+Logo.png") no-repeat center center;
    background-size: cover;
    position: absolute;
    left: 0;
    margin-left: -340px; /* Adjust this value to position the image correctly */
  }

  .header-display-mobile .header-title:before {
    content: '';
    display: inline-block;
    width: 50px;
    height: 50px;
    background: url("https://static1.squarespace.com/static/66430f73c6d51e60b08068ba/t/6660cd2735ccae378c1597ea/1717620007904/Header+Logo.png") no-repeat center center;
    background-size: cover;
    position: absolute;
    left: 0;
    margin-left: 20px; /* Adjust this value to position the image correctly */
  }

  .header-title {
    flex: 1;
    text-align: center;
  }

  .header-nav {
    flex: 1;
    display: flex;
    justify-content: center;
  }

Then, I added a shadow to it to make it more visible on white pages. Using this code:

:root {
  --logo-shadow-color: rgba(50, 50, 50, 0.5); /* Default shadow color */
}

.header-title-nav-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.header-title-nav-wrapper::before {
  content: '';
  display: inline-block;
  width: 180px;
  height: 170px;
  background: url("https://static1.squarespace.com/static/66430f73c6d51e60b08068ba/t/6660cd2735ccae378c1597ea/1717620007904/Header+Logo.png") no-repeat center center;
  background-size: cover;
  position: absolute;
  left: 0;
  margin-left: -340px; /* Adjust this value to position the image correctly */
  filter: drop-shadow(2px 2px 5px var(--logo-shadow-color)); /* Use CSS variable for shadow color */
}

/* Mobile version */
.header-display-mobile .header-title::before {
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  background: url("https://static1.squarespace.com/static/66430f73c6d51e60b08068ba/t/6660cd2735ccae378c1597ea/1717620007904/Header+Logo.png") no-repeat center center;
  background-size: cover;
  position: absolute;
  left: 0;
  margin-left: 20px; /* Adjust this value to position the image correctly */
  filter: drop-shadow(1px 1px 3px var(--logo-shadow-color)); /* Use CSS variable for shadow color */
}


This is all working amazing and it looks great. 

However, I wish to make the image (circled in red in the attached image) clickable now, so that it returns to the homepage. I already have a logo in the centre (ATLAS WELLBEING) which is clickable and I wish it to remain so. 

I haven't been able to figure it out yet. Could you help me please?

Site URL is https://mango-maracas-pfle.squarespace.com/

No password.

Thanks!

Screenshot 2024-06-07 at 13.17.04.png

Link to comment

CSS pseudo :after, :before, can't set click behavior.

You will need to use JavaScript code to add logo.

Use this code to Website Tools > Code Injection > Footer (DO NOT ADD CODE TO CUSTOM CSS)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('<a class="custom-img" href="https://mango-maracas-pfle.squarespace.com/" target="_self"><img src="https://static1.squarespace.com/static/66430f73c6d51e60b08068ba/t/6660cd2735ccae378c1597ea/1717620007904/Header+Logo.png" width="100px"/></a>').appendTo('.header-display-desktop');
});
</script>
<style>
  a.custom-img {
    position: absolute;
    left: 0;
}

a.custom-img img {
    width: 160px;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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


×
×
  • 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.