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

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


zoebrock

Question

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. 

 

 

Screen Shot 2021-07-20 at 7.13.51 am.png

Screen Shot 2021-07-20 at 7.13.38 am.png

Link to comment
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

5 answers to this question

Recommended Posts

  • 0

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

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

Link to comment
  • 0

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.

 

Link to comment
  • 0

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? 

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