ds90 Posted June 5 Posted June 5 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!
tuanphan Posted June 6 Posted June 6 What is site url? We can help easier. You can also try this guide. 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!)
ds90 Posted June 7 Author Posted June 7 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!
tuanphan Posted June 12 Posted June 12 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment