Jump to content

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

Go to solution Solved by zoebrock,

Recommended Posts

  • Replies 5
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

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

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.