Full Screen Video Top Being Cut Off by Header

Highlighted
New Member
17 0 0

I have added some custom CSS and HTML to the Modular theme to add a home screen video banner with a white background header. However, now the top of the video is being cut off. Ideas on how to remedy this? Below is the CSS we've added for the video and header. 

 

.video-bg {
position: relative;
width: 100%;
min-height: 100vh;
left: 0;
top: 0;
padding: 0, 0, 0, 10px;
z-index: 0;
margin: 0, 0, 0, 0;
overflow: hidden;
}

 

/*--- Fixed Video Background iOS/Mobile Style--*/
.video-wrap-bg {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#video {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
z-index: -1000;
}
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('') no-repeat;
background-size: cover;
transition: 1s opacity;
}

.template-collection nav.menu.menu--has-meganav li a {
color: #000;
}

.template-collection nav.menu li a {
color: #000;
}

.hidden {
display: none;
}

0 Likes
Highlighted

Hello,

Thank you for your question.

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

I'll help you to the best of my ability.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I'm available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
◦ My app free for limited time: Add a navigation styled like Instagram Stories to your website!
0 Likes
Highlighted
New Member
17 0 0

Here is the preview link: 

https://61uftg3tuq2elmaa-43402363044.shopifypreview.com

 

The issue is found on the home page. 

 

0 Likes
Highlighted

With the way your theme's video section is setup (with parallax) I am afraid that it is not possible to have the video not cut off.

Perhaps someone around here can come up with an alternative, but as far as I can tell you'd likely need to create a new section to achieve this.

Kind regards,
Diego


◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I'm available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
◦ My app free for limited time: Add a navigation styled like Instagram Stories to your website!
0 Likes
Highlighted
New Member
17 0 0
This is a separate coded section specifically for that video. All I want to do is for the header to not overlap the top of the video.
0 Likes
Highlighted
New Member
17 0 0

We were still experiencing this issue with the Parallax feature turned off. 

 

0 Likes