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!
