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

Transparent Header on Front Page only (7.1)


CaptainMaze

Question

Recommended Posts

  • 0

Hi @tuanphan

I'm wondering if you can help me as none of the solutions above work for me. I have a white header which I would like to make transparent. See attached how it looks at the moment (white header) vs how I would like it to look like = header transparent and banner goes to the top of the screen. 

Thanks in advance. 

 

Screen Shot 2020-11-01 at 6.35.48 pm.png

Screen Shot 2020-11-01 at 6.35.41 pm.png

Link to comment
  • 0
1 hour ago, marketingm said:

Add to Home > Design > Custom CSS then save & reload your site.

body.homepage .header-announcement-bar-wrapper {
    background: transparent !important;
    position: absolute !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

Hey  @tuanphan,

I'm trying to make the header transparent on the Homepage but only while staying at the top where the picture is visible. Afterwards it's supposed to take a certain color.
However, on the other pages I want it to take a predefined color.

I'm using the Almar template. 

https://flatworm-bird-bx27.squarespace.com

pw: 1

Hope that makes sense and thanks in advance for your help!!

Link to comment
  • 0

Thanks for the help @IXStudio, almost perfect!

This code changes it for all pages though. I would love that it only stays see through at the top of the "Home" Page. I tried adding it in the custom CSS section for just this page but that doesn't seem to work.

Is it possible to have the header only on one page see thru and "normal" on all others?

Link to comment
  • 0
6 hours ago, MunichMarketers said:

Thanks for the help @IXStudio, almost perfect!

This code changes it for all pages though. I would love that it only stays see through at the top of the "Home" Page. I tried adding it in the custom CSS section for just this page but that doesn't seem to work.

Is it possible to have the header only on one page see thru and "normal" on all others?

Hi,
Welcome!
Please share your website URL and details via DM to check it.

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
  • 0
Posted (edited)

@IXStudio, I was following along and got to your solution:

body[data-menu-overlay-theme-switcher="true"] .header.black:not(.shrink) {
    background: transparent !important;
}

(I changed "black" to "dark" as that is what I'm using) And just like MunichMarketers, this does make the header transparent only at the top, but it does it for every page. Is it possible to only apply this to the homepage?

 

My URL is arcseastudio.com

Edited by jgrish14
added URL
Link to comment
  • 0
On 7/2/2021 at 10:03 AM, jgrish14 said:

@IXStudio, I was following along and got to your solution:

body[data-menu-overlay-theme-switcher="true"] .header.black:not(.shrink) {
    background: transparent !important;
}

(I changed "black" to "dark" as that is what I'm using) And just like MunichMarketers, this does make the header transparent only at the top, but it does it for every page. Is it possible to only apply this to the homepage?

 

My URL is arcseastudio.com

try this

body.homepage .header:not(.shrink) {
    background: transparent !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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