Customizing header on certain page, not working for mobile

I am attempting to add a custom logo to a particular page in my site. Through research I have found code that works (changing color, changing logo, removing navigation etc). But I cannot figure out how to make the code work for mobile as well as desktop. 

Here is the code I have so far:

 

<style>
  .header-title-logo a {
    background-image: url(https://images.squarespace-cdn.com/content/v1/603ebfa17e44e82c29011a26/5deac22e-036f-4603-b342-3cd42ba13302/Untitled_Artwork+2.png?format=1500w);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;  
}
</style>

<style>

div.header-background {background-color: #C5C7F3 !important;
}

</style>

<style>
  .header-title-logo img {
    visibility: hidden;  
  }
.header-nav {
   display: none;
}

Can you share your website URL?

Selectors for the mobile header/logo etc are different from desktop, so you effectively need to do this twice.

BTW I'm not sure if you just didn't include it, but in the code you shared you need a closing </style> tag. You can also put all of your style code in one set of style tags rather than opening and closing three times.

18 hours ago, Ziggy said:

Can you share your website URL?

Selectors for the mobile header/logo etc are different from desktop, so you effectively need to do this twice.

 

BTW I'm not sure if you just didn't include it, but in the code you shared you need a closing </style> tag. You can also put all of your style code in one set of style tags rather than opening and closing three times.

Thanks for the tip. I’m very much a beginner. 
 

Url is Shannoncamillearts.com/reelsisterspod

Squarespace URL is http://spinach-accordion-j2if.squarespace.com

4 hours ago, smoman said:

Thanks for the tip. I’m very much a beginner. 
 

Url is Shannoncamillearts.com/reelsisterspod

Squarespace URL is http://spinach-accordion-j2if.squarespace.com

Replace your code with the code below.

<style>
  .header-title-logo a {
    background-image: url(https://images.squarespace-cdn.com/content/v1/603ebfa17e44e82c29011a26/5deac22e-036f-4603-b342-3cd42ba13302/Untitled_Artwork+2.png?format=1500w);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;  
  }

  div.header-background {
    background-color: #C5C7F3 !important;
  }

  .header-title-logo img {
    visibility: hidden;  
  }
  .header-nav {
    display: none;
  }

</style>

19 hours ago, Web_Solutions said:

 

Replace your code with the code below.

<style>
  .header-title-logo a {
    background-image: url(https://images.squarespace-cdn.com/content/v1/603ebfa17e44e82c29011a26/5deac22e-036f-4603-b342-3cd42ba13302/Untitled_Artwork+2.png?format=1500w);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;  
  }

  div.header-background {
    background-color: #C5C7F3 !important;
  }

  .header-title-logo img {
    visibility: hidden;  
  }
  .header-nav {
    display: none;
  }

</style>

 

Thanks for your help. It is still showing the incorrect logo on mobile. It also has a border around both mobile and web headers.

46 minutes ago, Web_Solutions said:

 

Please replace the code with the code below.

<style>
  .header-title-logo a, .header-mobile-logo a {
    background-image: url(https://images.squarespace-cdn.com/content/v1/603ebfa17e44e82c29011a26/5deac22e-036f-4603-b342-3cd42ba13302/Untitled_Artwork+2.png?format=1500w);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;  
  }

  div.header-background {
    background-color: #C5C7F3 !important;
  }

  .header-title-logo img, .header-mobile-logo img {
    visibility: hidden;  
  }
  .header-nav {
    display: none;
  }

</style>

 

That worked! Is there anyway to remove the border or the padding around the header?

Add this to the previous code:

.header .header-announcement-bar-wrapper .header-border {
    background: #c5c7f3;
}

That did the trick thank you both!

33 minutes ago, Ziggy said:

Add this to the previous code:

.header .header-announcement-bar-wrapper .header-border {
    background: #c5c7f3;
}