Jump to content

Using CSS or code injection to insert a logo/image on the far right side of the header

Recommended Posts

  • Shiloh-CFC changed the title to Using CSS or code injection to insert a logo/image on the far right side of the header
  • Replies 14
  • Views 2.1k
  • Created
  • Last Reply

Hi,

Insert this code in your Footer Code Injection.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

<script>
$(document).ready(function() {
$('.header-actions.header-actions--right').append('<img src="https://content.invisioncic.com/p289038/monthly_2020_10/CFC-log-with-border-01.thumb.png.5de683f3c1ac15a1bcdcc104fefd6e3d.png" width="200">')
});
</script>

 

Please use the like button if it helps you!

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
7 hours ago, IXStudio said:

Hi,

Insert this code in your Footer Code Injection.


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

<script>
$(document).ready(function() {
$('.header-actions.header-actions--right').append('<img src="https://content.invisioncic.com/p289038/monthly_2020_10/CFC-log-with-border-01.thumb.png.5de683f3c1ac15a1bcdcc104fefd6e3d.png" width="200">')
});
</script>

 

Please use the like button if it helps you!

Best,
Leopold

 

That worked great, thank you. However it is not showing up on mobile. Is there a way to adjust the code to have it show on mobile (like in the attached illustration). I'll attach a slightly modified logo along with a screenshot of how it looks in mobile. 

I very much appreciate the help!

CFC-header-logo-3-01.png

Screen Shot 2020-10-08 at 10.06.10 AM.png

Link to comment
22 minutes ago, IXStudio said:

Hi

Use this code in Design -> Custom CSS


@media screen and (max-width:640px){.header-actions.header-actions--right {
    display: block !important;
    position: absolute;
    top: 260px;
    right: 50px;
}
}

Please use the like button if it helps you!

Best,
Leopold

That worked great. Thank you! As I work with it in the site (mobile and desktop), I'm realizing we need to round the corners more, so I made a slightly modified logo with rounder corners. Is it possible to swap in this logo?

This is so helpful. Thanks a ton!

CFC-website-logo-final-01.png

Link to comment

Welcome!

Use this code in near of your last code.

.header .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-actions img {
    border-radius: 14px !important;
    border: 1px solid #39393b;
}

Change the radius and border to how much you want!

Please use the like button if it helps you!

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
1 hour ago, IXStudio said:

Welcome!

Use this code in near of your last code.


.header .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-actions img {
    border-radius: 14px !important;
    border: 1px solid #39393b;
}

Change the radius and border to how much you want!

Please use the like button if it helps you!

Best,
Leopold

I am really just hoping to replace the source file with the file attached here. 

CFC-website-logo-final-01.png

Link to comment

Archived

This topic is now archived and is closed to further replies.

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