Jump to content

Customizing header on certain page, not working for mobile

Go to solution Solved by Web_Solutions,

Recommended Posts

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;
}
Link to comment

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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

Link to comment
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>

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
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.

Link to comment
  • Solution
3 hours ago, smoman said:

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

 

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>

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
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?

Link to comment

Add this to the previous code:

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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