I added custom code to use an alternative logo for specific page headers, but I can't figure out how to modify the code to make the logo larger.

I needed to use a different logo for a page of my website, so I added the following code into the page header code injection. I was able to get the alternative logo to appear but now it's too small. Adjusting the max-height doesn't seem to help, but it does help prevent the logo from repeating. What code can I add or adjust so that I can make the logo larger?

<style>

.header-title{
 background-image:url('image-url-here'); 
  background-repeat: no-repeat!important;
  max-height: 100px;
 background-size: contain
} 
.header-title img{
opacity:0
}
</style>

Also, is there any way to make the alternative logo link a page other than the home page?

Update: I was able to resolve the height issue! Adding a line of code for min-height worked great. Still searching for a way to modify the link

@MackenzieKuck Hi! Can you share your site URL for context? 

2 minutes ago, Lesum said:

@MackenzieKuck Hi! Can you share your site URL for context? 

of course! 

https://mackenziekuck.com/take-heart-textiles

@MackenzieKuck If I understand correctly, you want to change the link for the header logo. You can add the following code to the page’s header code injection. Just replace the 'add-url-here' part with your URL. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
$('.header-title-logo a, .header-mobile-logo a').attr('href','add-url-here');
});
</script>

Also I noticed your header logo is not clickable. You need to modify this part of your existing code 

.header-title{
 background-image:url('image-url-here'); 
  background-repeat: no-repeat!important;
  max-height: 100px;
 background-size: contain
} 

to the following: 

.header-title a {
 background-image:url('image-url-here'); 
  background-repeat: no-repeat!important;
  max-height: 100px;
 background-size: contain
} 

16 minutes ago, Lesum said:

If I understand correctly, you want to change the link for the header logo. You can add the following code to the page’s header code injection. Just replace the 'add-url-here' part with your URL. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
$('.header-title-logo a, .header-mobile-logo a').attr('href','add-url-here');
});
</script>

Thank you! Revising the code to make the logo clickable worked great. However, I am not sure if I entered the above code correctly. I made sure to revise the 'add-url-here' to be the url that I want to point the link to, and I entered this code below the existing code in the page header code injection, but it still links to the default home page. 

1 minute ago, Lesum said:

You just need to add the link inside a quote. So the code should look like this:

That worked! Thanks so much for your help!