Jump to content

How do I make the header different on each page Squarespace?

Recommended Posts

Hello, could someone provide me CSS code for this adjustment?

I would like to have different logo (white) and different color of menu (also white) on title page only (see attached pic)? the rest should stay the same as it is now

https://stitchingpoetry.com

ps: just to be sure, you will add the code to "page settings - advanced", right?

ps: not sure where to upload the logo? any advice pls?

thank you!!!

Snímek obrazovky 2022-10-28 v 22.19.24.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

I think you could achieve this without code. Since the rest of your site pages are white, you could just make the header theme white in general, and it will have the same affect while also making it white on the home page. But, if you still think you need the CSS code, you can add this to the Page Header code injection of the home page.

<style>
  #header {
      background-color: #ffffff;
  }
</style>

 

Link to comment
8 hours ago, Caroline_Smith said:

I think you could achieve this without code. Since the rest of your site pages are white, you could just make the header theme white in general, and it will have the same affect while also making it white on the home page. But, if you still think you need the CSS code, you can add this to the Page Header code injection of the home page.

<style>
  #header {
      background-color: #ffffff;
  }
</style>

 

hey caroline, thank you for this, but I would like to have just the menu and logo (that is PNG and I have it) white? background should stay transparent. any advice? thank you again!

Link to comment
On 10/29/2022 at 2:21 PM, lukaserba said:

hey caroline, thank you for this, but I would like to have just the menu and logo (that is PNG and I have it) white? background should stay transparent. any advice? thank you again!

You can add this code to Homepage Header

<style>
  header#header img {
    filter: brightness(0) invert(1);
}
div.header-nav * {
    color: white !important;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.