Jump to content

Change header background color

Recommended Posts

  • 3 weeks later...
On 1/7/2020 at 9:35 PM, Orazio said:

Hi

I have the Flatiron template and the code doesn't work for me. Do i need a different code?

Each template needs different code. Can you share link to your site?

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
  • 2 months later...
12 hours ago, SashaLaff said:

Hi! I have the Hester template and I am need to keep the homepage transparent and keep the rest black!

Difficult to help without share link to your site

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
  • 2 weeks later...
14 hours ago, aaron_leduc said:

I'm wondering if there's a way to do a solid colored header background using the Avenue template.  Site is www.mvcchurch.org.  Thanks in advance!

 

Add to Home > Design > Custom CSS

/* check by tuan */
/* fullwidth header - background color */
#canvas {
    max-width: 100% !important;
}
#header {
    margin: -85px -75px;
    padding: 10px 75px !important;
    background: gray;
}

replace gray with white

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

Thank you so much for your help! 

When I copied your code in, it didn't work as intended. I tweaked some of the parameters to get the logo and menu back to where they should be, but the header is limited to the box around the content.  Screenshots attached

Screen Shot 2020-04-01 at 9.28.47 AM.png

Screen Shot 2020-04-01 at 9.29.25 AM.png

Screen Shot 2020-04-01 at 9.31.38 AM.png

Edited by aaron_leduc
Added info
Link to comment

Your header isn't fullwidth, so it is difficult to set background color. See screenshot below

On 4/1/2020 at 10:15 PM, aaron_leduc said:

Thank you so much for your help! 

When I copied your code in, it didn't work as intended. I tweaked some of the parameters to get the logo and menu back to where they should be, but the header is limited to the box around the content.  Screenshots attached

image.thumb.png.3f5d2542421ef525e1053a1fd84a3a7a.png

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
  • 3 weeks later...
22 hours ago, TheOutpost said:

Hi @tuanphan I am trying to make this change for the Haute template. I want the current transparent header to have a white background. Have tried a few snippets, but no luck so far. Is there an easy fix to make this adjustment? https://outpostlongwharf.squarespace.com/config/

 

Add to Page Settings > Advanced > Header

<style>
  header.Header.loaded {
    background: white !important;
}
  main#main {
    margin-top: 100px;
}
</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
  • 4 weeks later...

hi there! @tuanphan

you were so helpful for so many people, i was wondering if you could tell me the code or teach me how to change the color of the heading on my website so its different than the color that is behind the blog posts of my site. My website is pilotmagazine.uk . Thank you in advance! 

Link to comment
14 hours ago, Dagny said:

hi there! @tuanphan

you were so helpful for so many people, i was wondering if you could tell me the code or teach me how to change the color of the heading on my website so its different than the color that is behind the blog posts of my site. My website is pilotmagazine.uk . Thank you in advance! 

Which heading? Can you take a screenshot?

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
3 hours ago, Dagny said:

@tuanphan this header please, right now it is the same color as my background but I'd like it to be something different. Thanks!!

 

about, home, contact item?

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
17 hours ago, AtomicTangerine said:

@tuanphan Can you share the code on how to make the fixed header on the home page only transparent in 7.1? And then show as a color on scroll?

Thank you!

If you share link to your homepage, I can take a look

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
  • 4 months later...
23 minutes ago, Fredrik said:

Hello @tuanphan

I am having the question about trying to get the header on the index (home) page to have a transparent background, while having a black background on the other pages. I am using a theme called Hester on 7.1.

Would really appreciate the support if you have the time!

Thank you!

Can you share site url? We can check easier.

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
On 10/5/2020 at 5:18 PM, Fredrik said:

Hello again @tuanphan

The site URL is wrasse-pigeon-rejc.squarespace.com

Thank you!

Add to Home > design > Custom CSS

body:not(.homepage) .header-announcement-bar-wrapper.black, body:not(.homepage) header#header {
    background-color: black !important;
}

 

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.