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

Invert navigation color on Banner Images (fairfield template)




I would like to invert the navigation color on Banner Images (.Index-page--has-image), so that when I scroll down the website the navigation changes color when it hits banner image sections.

here is my website : ventrus.fr

Thank's for your help

Edited by tplazol
Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 0

Hi @tplazol,

On the pages where you'd like the logo inverted, try adding this code to the Page Settings > Advanced: Page Header Code Injection

.Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(100%);


Link to post
  • 0

Hi @christyprice thank you so much for your quick reply :).

I'm looking to invert the primary navigation (on the right side of my website https://ventrus.fr) on banner image sections of my index page.

I changed the .Header-branding-logo to .Header-nav--primary and the navigation inverts only when you leave the index page and go to the specific page targeted.

But when you actually scroll through the index page, the navigation color stays the same throughout.

Thank you for your help.

Link to post
  • 0

Ah, sorry - I misread your original post and didn't realize there was a navigation going down the side. Offhand, I'm not sure how the nav would know when it's over a particular index section - that looks like it's custom code? I'd ask the original developer or perhaps someone else here can help you out. 

Link to post

Create an account or sign in to comment

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

  • Create New...