Change link-color on fixed nav based on current row-background
-
Is there a way to change the color of links in a fixed nav menu based on the current background-color of the row. I know there's plugins like backgroundCheck but it only works on images.
On my website there's a different bg-color for each section and when its a dark color the links wont show, obviously. Here's the website: www.aronsundberg.se
Grateful for any help or advice!
-
oh wow, nice website!
Ok you got one black row and I guess you want to have white nav text just for that.
Right click any rows where you want your menu to be white, choose "set html class/id" and set the class:blackrow
Enter this js into "Custom <head> content" in "Custom CSS & HTML" in "Lay Options":
<script> var offset = 50; var $blackRows; var $nav; Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){ $blackRows = jQuery(".blackrow"); $nav = jQuery("nav"); $nav.removeClass("white"); }); jQuery(document).on("scroll", function(){ $blackRows.each(function(){ var rect = this.getBoundingClientRect(); if(rect.top - offset < 0 && rect.bottom - offset > 0){ $nav.addClass("white"); return false; }else{ $nav.removeClass("white"); } }); }); </script>
And this css into "Custom CSS for Desktop Version"
nav.primary a{ transition: all 200ms ease; } nav.primary.white a{ color: white; opacity: 1; }
-
@arminunruh Wow thanks a lot for writing all that code, i'll try this immediately. Thanks so much for your help :100: :)
-
Hey Armin,
Thanks for the tip.
That worked great, but is there any chance to make it work when the full screen slider is enabled on a page?
Cheers
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it