Jump to content

Need Help Changing Color of Logo and Nav links to white when at top of page, fixed header

By jordansears2, in Customize with code

Go to solution Solved by Square_Ace,

Recommended Posts

jordansears2 Level 2

jordansears2

Posted
Posted

Site URL: https://www.brightpt.com/

Hey, thank you for taking the time to look - I'm trying to figure out how to get the header logo and navigation links to turn from white on a transparent background, to color on a white background after scroll.

I've got the fixed nav set up with the correct colors once you scroll past the top image but need the logo / nav items to be white when on the transparent background. 

I have been trying to do it using filter: invert but I'm not able to get that code to apply only to the navigation when it's in it's original position.

 

Thank you!

  • Replies 2
  • Views 435
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

jordansears2
jordansears2

Thank you! That worked perfectly. Thank you! That is very close, but my dropdown nav links ( titled either #header a[href="/#secondary-nav" or #wm-subnav a.wm-subnav-item in the CSS ) are also wh

  • Solution
Square_Ace Level 8

Square_Ace

Posted
  • Solution
Posted (edited)

Hi, try adding this code in your code injection header: 

<style>
  #header[data-section-theme="bright-inverse"]:not(.shrink) {
    --navigationLinkColor: #fff;
  }
</style>

This will work when the first section colour palette is what you have your homepage set to (I think it's Bright 1, might be Bright 2).

It can't go in the Custom CSS because it doesn't like CSS variables with capitals, but that's how Squarespace sets it.

If you want to animate the transition, this will work just for the nav links and can be added to the Custom CSS. You'll need to modify it if you want it to work for more than the nav links or if you add a site-wide Squarespace animation: 

.header-nav-item a {
  transition: color 0.4s;
}

Your logo will still be black. This could be fixed if you used an SVG for the logo because you can control the colour of SVGs with CSS. You'd need some javascript to replace the logo <img> with an <svg> element.

Hope that helps.

Andrew
Square Ace

 

Edited by digitalfreelancer

Square Ace

Enhancing Squarespace websites for over a decade. I am an expert in writing custom code for the Squarespace platform.
Tailor-made, reusable solutions to your problems, whether it's styling, layout or functionality.
Maverick Squarespace Designers, I'll be your Goose. If your tools are holding back your creative vision, maybe I can help.
I also build useful plugins for Squarespace (with some really positive reviews) including the popular high-quality video background plugin.

jordansears2 Level 2

jordansears2

Posted
  • Author
Posted (edited)

Thank you! That worked perfectly.

Thank you! That is very close, but my dropdown nav links ( titled either #header a[href="/#secondary-nav" or #wm-subnav a.wm-subnav-item in the CSS ) are also white now on a white background.

Is there a way to control those separately?

Thank you very much for your time, this is much closer than I've gotten after quite a bit of CSS trial / error.

EDIT: I solved the above in italics by adding CSS to .header-nav-folder-item-content

Edited by jordansears2
fixed problem

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources