I solved the problem.
Here it is.
Subject---> Solution That I Used For Header Appearing During Scrolling
Go to customizer--> Main Header-->Style--> Padding 0
Click on background color.
I used the code #eff5ff to match the background of the header image that I placed in Elemetor's upper section.
In Sydney's Customizer section for the main header, underneath the color choice dots, is the transparency bar. I set the transparency to 9.
This allows the image header to still be seen and it allows the videos on the other pages to be seen full screen without the Sydney main header interferring with the full screen video page.
This worked great in desktop mode.
But at first, when I switched to tablet and mobile mode there was significant space between my Elementor Top Page, where the image header is placed, and the Sydney main header.
After a long period of experimentation, I soon realized that I had to use Elementor's Section and Column Advanced Tab to adjust the padding and margin for each mode and for each paqe.
Thankfully, by GOD's grace, I was able to resolve the issue.
Here are the threads I visited:
--> https://forums.athemes.com/t/remove-white-space-between-header-and-page-content/35952
[Hello there, Probably you enabled incorrect header type for you don’t use header image. Visit Appearance > Customize > Header area > Header type; and enable “No header (only menu)”. Regards, Kharis aThemes Support
* My Comment: This choice no longer exists in the upadated theme.]
--> https://forums.athemes.com/t/how-to-remove-margin-between-header-and-content/8547
[Following is the line of code that was the key to fixing the problem]
csaba
May '16
Hi,
You can reduce the space between header and content on all pages with this Custom CSS:
.page-wrap {
margin-top: -100px !important;
}
The page wrap was the key.
I hope this helps someone else.
Joshua Davis
Customizer Main Header Settings
https://snipboard.io/MU7rtG.jpg
https://snipboard.io/0Wfptv.jpg
