Site title below background cover video
-
Hi,
I have a page with the first row set as a full-height background video and the option "Cover page" checked.
I would like to hide the site title (that is a fixed image) under the video, so that it is shown only when user scrolls down.
I tried to adjust the z-index of the containers but without results.
.sitetitle { z-index: 2!important;} .cover-inner { z-index: 999!important;}
If I set a value smaller than 2 for the .sitetitle it disappears.
Thanks in advance
-
Hi Richard,
the site is still in development, I can give you private access to the WP admin if needed.
These are the screenshots of the page without any custom CSS.
The first is the page as it opens, with a fullscreen background video. The drawing of the man on the upper left corner is the PNG site title. As you can see it overlaps the video.
The second is the page that scrolls down.
I would like the site title to stay under the background video and be discovered as the user scrolls down, only adjusting the z-index of the two elements.
Thanks in advance.
-
Dear @dmncn
It's a bit of a trick with just z-indexing alone. The whole system works on z-index:
- Cover: z-index 1 (must be the lowest to slide underneath content)
- Content: z-index 2 (must be higher to not be hidden by cover)
- Site-title: z-index 3 (must remain above content).
So i think however you assign new z-indexing to the above three elements it wont work for example:
- Cover: z-index 1 (must be the lowest to slide underneath content)
- Content: z-index 2 (must be higher to not be hidden by cover)
- Site-title: z-index 0 (must remain behind cover == but now hidden by content).
To use z-indexing for the site-title to be hidden then shown, the Cover must be higher than the image, but then it's also higher than the content and will not slide behind and therefore not be a cover.
I think to solve this problem you need some javascript or jquery that "at a certain scroll position the site-titles z-index changes from 0 to 3"
Best
Richard
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