Change nav text color based on image behind it

Note: each site will have a different code

Here is a quick guide to find the code

#1. First, you need to find Section ID of all sections in your Slider Pro Plugin

#2. Next, use code like this to Custom CSS

body:has(.swiper-slide-active [data-section-id="68bdd6871007d21a55e18c03"]) div.header-nav-item>a {
  color:red !important;
}
body:has(.swiper-slide-active [data-section-id="68be52bcd004da13061304a3"]) div.header-nav-item>a {
  color: green !important;
}

#3. Explain

  • When a slide image is displayed, plugin will add an ID “.swiper-slide-active”
  • The code will target this ID and change the color of the nav color.
Buy me a coffee