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

Site URL: http://instreamwoodbanknetwork.com

Hello. I am trying to insert our Cascade Forest Conservancy logo (which is on the footer just fine) on the far right side of the header. I can find no way to do this. I want to keep the title (on the left side of the header) just where it is so replacing the title with a logo doesn't work.  

Thanks for any assistance!

Hi. You want to insert a logo in this position? 

Yes that's where I was hoping to have it (about as far in on the right as the title is on the left). 

Still hoping to find a way to put the logo on the top right of the header. I can upload the logo if need be.

Thank you!

Hi,
Please upload your logo and let me know.

Please use the like button if it helps you!

Best,
Leopold

Here is the logo (attached). I can't figure out exactly how to upload it to the site and then send the url for it. If there is a better way to get you the logo, do let me know. 

Thank you for your help. 

On 10/6/2020 at 9:25 AM, IXStudio said:

Hi,
Please upload your logo and let me know.

Please use the like button if it helps you!

Best,
Leopold

Hello. I have uploaded the image. Are you able to relay a workable code with the image uploaded as-is?

Thank you very much.

On 10/4/2020 at 2:03 AM, tuanphan said:

Hi. You want to insert a logo in this position? 

Yes that is where I want it. Thanks. 

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

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!

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

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!

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

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. 

Contact me via DM please.