Header /Navigation Overlay Transparent On Some pages, White On Others?

Site URL: https://otipoti.squarespace.com/

Here's another tough one.

Trying to find a work around to make the navigation header transparent on certain pages, and white on others. 

The transparent header works well on a simple photo banner, but looks horrible on my portfolio pages. I'd love to be able to make all portfolio pages have a white sticky navigation please! Thanks in advance. 

Hello,

I'm assuming that you've enabled the transparent header option. This is an easy but unreliable way to do this because it will adjust the header/navigation colors to inherit the primary background color of the section immediately following it. This means that it will switch colors depending on the page you are on, which isn't a consistent way to have a transparent header.

The work around that worked for me is to change the header to a color scheme and switching OFF the transparent header option. You can then apply some Custom CSS to the header to change it. If you have a button to the right of the social links, it will require further styling but I've tried to cover everything in the examples you shared. 

.header-title-text a, .header-nav-item a, .header-actions .icon--fill svg, .header-actions a{
  background: transparent !important;
  fill: #fff !important;
  color: #fff !important;
}
.header {
  background: rgba(0,0,0,0.0) !important;
}

Hope this helps!

-Dan

1 hour ago, Wolfsilon said:

Hello,

I'm assuming that you've enabled the transparent header option. This is an easy but unreliable way to do this because it will adjust the header/navigation colors to inherit the primary background color of the section immediately following it. This means that it will switch colors depending on the page you are on, which isn't a consistent way to have a transparent header.

The work around that worked for me is to change the header to a color scheme and switching OFF the transparent header option. You can then apply some Custom CSS to the header to change it. If you have a button to the right of the social links, it will require further styling but I've tried to cover everything in the examples you shared. 

 

.header-title-text a, .header-nav-item a, .header-actions .icon--fill svg, .header-actions a{
  background: transparent !important;
  fill: #fff !important;
  color: #fff !important;
}
.header {
  background: rgba(0,0,0,0.0) !important;
}

Hope this helps!

-Dan

Hey Dan - I tried this. Took away transparent nav and inserted your code into Custom CSS - it made the nav transparent unilaterally again - meaning it's gone transparent on the pages I don't want it to as well as the ones that I do.... any ideas? thx

We'll need to take more complex steps because I misunderstood your problem. Start by removing the first half of the code I sent. You still need to independently set the header to be transparent. Worry about the buttons and text later. Using the method below for each page you want a header background to be applied to.

Navigate to pages > settings (gear icon) > advanced > Page Header Code Injection.

<style>
  .header{background:"YOUR_COLOR_HERE" !important;}
</style>

This should update the background color of the header on a specific page. You'll want to tweak the text and button CSS in the Custom CSS menu for each page or add these CSS changes before the closing "</style>" tags.

Hiya. So I put this into the advanced code section for the portfolio but it hasn't worked. Portfolio pages don't have individual gear settings so I had to use the entire portfolio section. 

The problem persists! Could I try universally setting it to white and adding some code to make certain pages transparent instead?