Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Question

Hello,

How can I get the header on the index (home) page to have a transparent background so the photos are layered behind the text, while maintaining the white background on the other four pages and the fixed position overall?

I'm using the Miller template, and the site is http://iggyrabinovich.com/

Thanks!

Share this post


Link to post

19 answers to this question

Recommended Posts

  • 0

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!

 

Share this post


Link to post
  • 0
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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
Posted (edited)

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

Share this post


Link to post
  • 0

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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
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>

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0

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! 

Share this post


Link to post
  • 0
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?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0

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

Screen Shot 2020-05-14 at 6.39.35 PM.png

Share this post


Link to post
  • 0
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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
18 hours ago, tuanphan said:

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

Hey @tuanphan I actually figured it out. This is what worked for me:

<style>
.header-announcement-bar-wrapper {
  background-color: transparent !important
  }
.header-announcement-bar-wrapper.shrink {
    background-color: #533181!important;
  }
</style>

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...