Need Help Changing Color of Fixed Header for Scrolling

On 7/2/2022 at 10:02 PM, g-souza said:

on my homepage, the header remains transparent even after scrolling the page down. ideally, it should behave as the other pages (turning into a solid white rectangle):

Add to Design > Custom CSS

body.homepage .shrink .header-announcement-bar-wrapper {
    background-color: white !important;
}

On 7/4/2022 at 8:57 AM, tuanphan said:

Add to Design > Custom CSS

body.homepage .shrink .header-announcement-bar-wrapper {
    background-color: white !important;
}

 

amazing, many thanks! @tuanphan

Hi,

I need to get a few bugs fixed for the header menu of my site.  www.maxkayn.com

So it is working but there are a few twitches to fix like.
- When I scroll and click on the menu in the middle of the page the title and burger menu stay dark when they should be white

- When I scroll and come back to the top of the page and click on the burger menu the header stays white nad does not scroll back when it should.

this is the CSS i'm using:

header#header.shrink a#site-title, header#header span {
	color: white !important;
}

//Site title on scroll back black
header#header.shrink a#site-title, header#header span, :not(.header--menu-open) .burger-inner .top-bun, :not(.header--menu-open) .burger-inner .patty, :not(.header--menu-open) .burger-inner .bottom-bun {
	color: black !important;
}

//Site title on scroll back black
header#header.shrink :not(.header--menu-open) .burger-inner .top-bun, header#header.shrink :not(.header--menu-open) .burger-inner .patty, header#header.shrink :not(.header--menu-open) .burger-inner .bottom-bun {
	background-color: black !important;
}

// Site burger meniu normal position (WHite)
header#header header#header span, :not(.header--menu-open) .burger-inner .top-bun, :not(.header--menu-open) .burger-inner .patty, :not(.header--menu-open) .burger-inner .bottom-bun {
	background-color: white !important;
}

// Site title normal position (WHite)
header#header a#site-title, header#header span, :not(.header--menu-open) .burger-inner .top-bun, :not(.header--menu-open) .burger-inner .patty, :not(.header--menu-open) .burger-inner .bottom-bun {
	color: white !important;
}

On 2/8/2023 at 1:48 AM, MAXKAYN said:

Hi,

I need to get a few bugs fixed for the header menu of my site.  www.maxkayn.com

So it is working but there are a few twitches to fix like.
- When I scroll and click on the menu in the middle of the page the title and burger menu stay dark when they should be white

- When I scroll and come back to the top of the page and click on the burger menu the header stays white nad does not scroll back when it should.

this is the CSS i'm using:

header#header.shrink a#site-title, header#header span {
	color: white !important;
}

//Site title on scroll back black
header#header.shrink a#site-title, header#header span, :not(.header--menu-open) .burger-inner .top-bun, :not(.header--menu-open) .burger-inner .patty, :not(.header--menu-open) .burger-inner .bottom-bun {
	color: black !important;
}

//Site title on scroll back black
header#header.shrink :not(.header--menu-open) .burger-inner .top-bun, header#header.shrink :not(.header--menu-open) .burger-inner .patty, header#header.shrink :not(.header--menu-open) .burger-inner .bottom-bun {
	background-color: black !important;
}

// Site burger meniu normal position (WHite)
header#header header#header span, :not(.header--menu-open) .burger-inner .top-bun, :not(.header--menu-open) .burger-inner .patty, :not(.header--menu-open) .burger-inner .bottom-bun {
	background-color: white !important;
}

// Site title normal position (WHite)
header#header a#site-title, header#header span, :not(.header--menu-open) .burger-inner .top-bun, :not(.header--menu-open) .burger-inner .patty, :not(.header--menu-open) .burger-inner .bottom-bun {
	color: white !important;
}

 

#1. Add to Design > Custom CSS

body.header--menu-open header#header a#site-title {
    color: white !important;
}
body.header--menu-open header#header .burger .burger-box .burger-inner>div {
    background-color: white !important;
}

@tuanphan I used the code below, and all works perfect, except the two menu links to the right of the logo are not showing on scroll back. Is there a way to make them black too? (I have a split navigation code in the footer injection so it might be causing this.) 
https://teal-manatee-bd66.squarespace.com/
Pword: KateJamieson1234

#header {
  background-color: transparent;
}
.header-announcement-bar-wrapper {
  background-color: rgba(0,0,0,0)!important;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}
.tweak-fixed-header .shrink.header {
  background: #ffffff !important;  
}
.tweak-fixed-header .shrink.header .header-nav-wrapper a {
  color: #000 !important;
}
header#header.shrink a#site-title, header#header span {
    color: black !important;
}
header#header.shrink .burger-inner>div {
    background-color: black !important;
}

On 4/24/2023 at 7:01 AM, Ekin said:

@tuanphan I used the code below, and all works perfect, except the two menu links to the right of the logo are not showing on scroll back. Is there a way to make them black too? (I have a split navigation code in the footer injection so it might be causing this.) 
https://teal-manatee-bd66.squarespace.com/
Pword: KateJamieson1234

#header {
  background-color: transparent;
}
.header-announcement-bar-wrapper {
  background-color: rgba(0,0,0,0)!important;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}
.tweak-fixed-header .shrink.header {
  background: #ffffff !important;  
}
.tweak-fixed-header .shrink.header .header-nav-wrapper a {
  color: #000 !important;
}
header#header.shrink a#site-title, header#header span {
    color: black !important;
}
header#header.shrink .burger-inner>div {
    background-color: black !important;
}

Add this CSS under

header#header.shrink .header-nav-item a {
    color: black !important;
}

Hello 

I have an issue trying to change the color of the title when scrolling down. 

I have tried this code but it's not working

header#header.shrink {
  background: #272727 !important;
}
#header.shrink .header-nav-item  > a {
  color: #F9F9ED;
}
#header.shrink .header-site-title > a {
  color: #F9F9ED !important;
} 
} 
}
}

The navigation color change when scrolling but not the title (red)

Could you please help me to fix this ? 
Thanks ! 

On 11/27/2023 at 11:33 PM, ElizabethM said:

Hello 

 

I have an issue trying to change the color of the title when scrolling down. 

I have tried this code but it's not working

 

header#header.shrink {
  background: #272727 !important;
}
#header.shrink .header-nav-item  > a {
  color: #F9F9ED;
}
#header.shrink .header-site-title > a {
  color: #F9F9ED !important;
} 
} 
}
}

 

The navigation color change when scrolling but not the title (red)

Could you please help me to fix this ? 
Thanks ! 

Title uses this

header#header.shrink a#site-title {
	  color: #F9F9ED !important;
}