This marks my final inquiry regarding my new website.

I've come across a bug in the hero section. The overlay elements—menu, logo, and hero caption—are displaying inverted colors incorrectly. When I select 'Invert foreground color over hero image' as 'YES' and 'Background type' as 'Dark or Light,' peculiar issues arise.

To observe the problem, please visit https://beta.bigpitcher.nl/playground/ and click on the sportswoman (https://beta.bigpitcher.nl/works/test-123/). You'll notice that all elements in the hero section turn black. When you scroll to the bottom and scroll back, the elements menu/logo are correct (not the arrow). Or just refresh the page and you use the same result. I didn't change anything in the code... strange bug 🤯

> You can also observe the issue in the screen recording I've provided.

-----------------------------

Alternatively, select a dark-looking thumbnail in the gallery/playground to navigate to its portfolio page. On this page, I added CSS code (see below) - example - https://beta.bigpitcher.nl/works/3d-cube/. If you go directly to this page everything looks ok. But when you use 'Auto Navigate On End Scroll' option that uses the data-type="page-transition" it doesn't look good.

Somehow, the default pages with a hero section work correctly because I added some CSS code and did not use the data-type="page-transition" attribute—see example: https://beta.bigpitcher.nl/audi-a4-experience/ . 

I hope it makes sense...

-----------------------------

The code in Elementor is added to the first container at the top (title, subtitle and arrow):

.hero-title {
    color: #FFF;
}

.hero-subtitle {
    color: #FFF;
}

.hero-arrow i.arrow-icon {
    border: solid #FFF;
}

.hero-arrow span {
    border: 2px solid rgba(255,255,255,0.2);
    
}

.dark-content i.arrow-icon:after {
    background-color: #FFF;
}

-----------------------------

Could you provide assistance? Or am I doing something wrong?
Many thanks!

Hi!

I apologize, but I'm having difficulty grasping the modifications you made in the code or the changes you mentioned. Did you eliminate the 'Invert foreground color over hero image' function? I'm uncertain why it's considered redundant. In my understanding, this function is essential, especially when employing a dark hero image in the hero section and a light background below it. If the only choices are dark or light backgrounds, not having this function could result in overlay elements not adapting to the correct color (and leading to inverted content (text) in the main content section below).

Is there something I might be overlooking, or is there another aspect I should consider?
Sorry for the inconvenience...

See attachment - screen record.

Example page: https://beta.bigpitcher.nl/nommm/
Example portfolio: https://beta.bigpitcher.nl/works/music-platform-echoo/ 

Thanks,

Mickel

You can assign a background type for the page.
I understand, light or dark...

Then you can have sections with different background types and colors - full width.
I know, but the logo and menu will stay the same color after the hero section. 

But it should work like this example you have online...see attachment I use Elementor and not Gutenberg. Feel free to create a working example page or portfolio page. Maybe this will help all uncertainties.

PS: Currently, I have substituted the PHP file with the previous code.

I apologize, but I followed the instructions you provided.

Could you kindly create an example in the test portfolio (test 1 2 3 - in the portfolio section)?
I appreciate your understanding, and I'm committed to comprehending your instructions accurately.

-------

1. you set the background type to dark - because you have a hero image whose background is dark

Yes, I did this 

2. then the logo, hero caption and menu items will be displayed with white color

Yes, I did this 

3. however you want to have a white hero section immediately after. You can make it full-width.

Yes, I think I did this 

4. you set the Elementor container/Gutenberg Serano container having a light background type (and the actual background color)

No, I can't find the options. But I changed the background to white.

5. AND you set Header Color to 'Invert' instead of 'Inherit'

No, I can't find this option anywhere in Elementor

PS: Currently, I have substituted the PHP file '/sections/hero_section_container.php' with the previous code. 

Ok. Thanks!

Awesome! Did you make changes to the theme code? As we speak, I changed my website to www.bigpitcher.nl (this is a copy of beta,bigpitcher.nl).

Can I copy and paste the theme folder to my .nl website?

Thanks for your service!!

Super! And where can I find Serano Elementor Widgets plugin (from 1.0 -> 1.1)?   

You mean this folder? (see attachment)

Ok thanks!