Jump to content

ds90

Member
  • Posts

    2
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

ds90's Achievements

Level 1

Level 1 (1/20)

0

Reputation

  1. 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!
  2. 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!
×
×
  • 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.