transparent Header Menu Hiding Behind Video Background On Mobile

Luc1dd
Visitor
3 0 0

on mobile the video background covers the navigation menu and cart and ect please help me fix this web site is Luc1d.shop 

 

this is the code i use for video background 

 

 

 

{%- if section.blocks.size > 0 -%}

{%- for block in section.blocks -%}

{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

 

{% if block.type == 'video' %}

<div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image | img_url: 'master' }}');{%- endif -%}">

 

{%- if block.settings.video_link != blank -%}

<div class="fullscreen-video-wrap">

<video class="video-js" loop autoplay preload="none" muted playsinline

poster="https:{{ block.settings.video_image | img_url: 'master' }}">

<source src="{{ block.settings.video_link }}" type="video/mp4">

</video>

</div>

{% endif %}

 

<div class="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>

<div class="videoBoxInfo">

{% if block.settings.title != blank %}

<h1 class="videoBoxInfoTitle" style="color: {{ block.settings.color_text }}">

{{ block.settings.title | escape }}

</h1>

{% endif %}

 

{%- style -%}

.videoBackground .imageBoxInfoDescription p {

color: {{ block.settings.color_text }}!important;

}

{%- endstyle -%}

 

{% if block.settings.text != blank %}

<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">

{{ block.settings.text }}

</div>

{% endif %}

 

{% if block.settings.button_link != blank and block.settings.button_label != blank %}

<a href="{{ block.settings.button_link }}" class="videoBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">

{{ block.settings.button_label | escape }}

</a>

{% endif %}

</div>

</div>

{% else %}

<div class="imageBox" style="background-color: {{ block.settings.color_bg }}; {%- if block.settings.image_bg != blank -%}background-image: url('{{ block.settings.image_bg | img_url: 'master' }}');{%- endif -%}">

 

<div class="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>

 

<div class="imageBoxInfo">

{% if block.settings.title != blank %}

<h1 class="imageBoxInfoTitle" style="color: {{ block.settings.color_text }}">

{{ block.settings.title | escape }}

</h1>

{% endif %}

 

{%- style -%}

.videoBackground .imageBoxInfoDescription p {

color: {{ block.settings.color_text }}!important;

}

{%- endstyle -%}

 

{% if block.settings.text != blank %}

<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">

{{ block.settings.text }}

</div>

{% endif %}

 

{% if block.settings.button_link != blank and block.settings.button_label != blank %}

<a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">

{{ block.settings.button_label | escape }}

</a>

{% endif %}

</div>

</div>

{% endif %}

{%- endfor -%}

 

{% else %}

<div class="placeholderNoblocks">

This section doesn’t currently include any content. Add content to this section using the sidebar.

</div>

{%- endif -%}

 

<style>

.main-content .videoBackground {

margin-top: -55px;

}

.videoBackground {

height: 30%;

position: relative;

}

.videoBackground .fullscreen-video-wrap {

position: absolute;

top: 0;

left: 0;

min-width: 100%;

width: 100%;

height: 100%;

overflow: hidden;

}

.videoBackground .fullscreen-video-wrap .video-js {

position: absolute;

top: 0;

left: 0;

min-height: 100%;

min-width: 100%;

width: 100%;

height: 100%;

object-fit: cover;

}

.videoBackground .fullscreen-video-wrap video {

min-height: 100%;

min-width: 100%;

object-fit: cover;

}

.videoBackground .videoBox {

display: flex;

align-items: center;

justify-content: flex-end;

flex-direction: column;

padding: 100px 20px 80px;

background-size: cover;

background-position: center;

background-repeat: no-repeat;

min-height: 500px;

max-height: 800px;

height: calc(100vh - 165px);

position: relative;

}

.videoBackground .imageBox {

display: flex;

align-items: center;

justify-content: flex-end;

flex-direction: column;

padding: 100px 20px 80px;

background-size: cover;

background-position: center;

background-repeat: no-repeat;

position: relative;

min-height: calc(100vh - 165px);

height: auto;

}

.videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {

z-index: 0;

text-align: center;

}

.videoBackground .overlay {

content: "";

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: #000;

z-index: 1;

}

.videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {

-moz-user-select: none;

-ms-user-select: none;

-webkit-user-select: none;

user-select: none;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

display: inline-block;

width: auto;

text-decoration: none;

text-align: center;

vertical-align: middle;

cursor: pointer;

border: 1px solid transparent;

border-radius: 2px;

padding: 8px 15px;

font-style: normal;

font-weight: 800;

text-transform: uppercase;

letter-spacing: 0.06em;

white-space: normal;

font-size: 14px;

margin-top: 20px;

}

.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {

color: #FFF;

font-size: 30px;

line-height: 40px;

}

.videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {

max-width: 500px;

margin: 0 auto;

}

.videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {

font-size: 18px;

line-height: 28px;

}

.videoBackground .placeholderNoblocks {

text-align: center;

max-width: 500px;

margin: 0 auto;

}

@media screen and (max-width: 767px) {

.main-content .videoBackground {

margin-top: -35px;

}

.videoBackground .fullscreen-video-wrap {

z-index: 3;

}

.videoBackground .videoBox {

min-height: 500px;

height: 100%;

position: relative;

padding: 0;

}

.videoBackground .fullscreen-video-wrap {

position: relative;

min-height: 300px;

}

.videoBackground .videoBoxInfo {

padding: 40px 20px;

background: #000;

width: 100%;

}

}

</style>

 

{% schema %}

{

"name": {

"en": "Video Background"

},

"class": "videoBackground",

"max_blocks": 1,

"blocks": [

{

"type": "video",

"name": "Video",

"settings": [

{

"type": "url",

"id": "video_link",

"label": {

"en": "Video link"

}

},

{

"type": "image_picker",

"id": "video_image",

"label": {

"en": "Cover image"

}

},

{

"type": "range",

"id": "overlay_opacity",

"label": {

"en": "Overlay opacity"

},

"min": 0,

"max": 99,

"step": 1,

"unit": {

"en": "%"

},

"default": 0

},

{

"type": "header",

"content": {

"en": "Text"

}

},

{

"type": "text",

"id": "title",

"label": {

"en": "Heading"

},

"default": "Video slide"

},

{

"type": "richtext",

"id": "text",

"label": {

"en": "Description"

},

"default": {

"en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"

}

},

{

"type": "color",

"id": "color_text",

"label": {

"en": "Text color"

},

"default": "#ffffff"

},

{

"type": "text",

"id": "button_label",

"label": {

"en": "Button label"

}

},

{

"type": "url",

"id": "button_link",

"label": {

"en": "Button link"

}

},

{

"type": "color",

"id": "color_btn_bg",

"label": {

"en": "Background button color"

},

"default": "#ffffff"

},

{

"type": "color",

"id": "color_btn_text",

"label": {

"en": "Button text color"

},

"default": "#ffffff"

}

]

},

{

"type": "image",

"name": "Image",

"settings": [

{

"type": "color",

"id": "color_bg",

"label": {

"en": "Background color (optional)"

},

"default": "#16165b"

},

{

"type": "image_picker",

"id": "image_bg",

"label": {

"en": "or use an image (required)"

}

},

{

"type": "range",

"id": "overlay_opacity",

"label": {

"en": "Overlay opacity"

},

"min": 0,

"max": 99,

"step": 1,

"unit": {

"en": "%"

},

"default": 0

},

{

"type": "header",

"content": {

"en": "Text"

}

},

{

"type": "text",

"id": "title",

"default": "Image slide",

"label": {

"en": "Heading"

}

},

{

"type": "richtext",

"id": "text",

"label": {

"en": "Description"

},

"default": {

"en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"

}

},

{

"type": "color",

"id": "color_text",

"label": {

"en": "Text color"

},

"default": "#ffffff"

},

{

"type": "text",

"id": "button_label",

"label": {

"en": "Button label"

}

},

{

"type": "url",

"id": "button_link",

"label": {

"en": "Button link"

}

},

{

"type": "color",

"id": "color_btn_bg",

"label": {

"en": "Background button color"

},

"default": "#ffffff"

},

{

"type": "color",

"id": "color_btn_text",

"label": {

"en": "Button text color"

},

"default": "#ffffff"

}

]

}

],

"presets": [

{

"name": {

"en": "Video Background"

},

"category": {

"en": "Main"

},

"blocks": [

{

"type": "video"

}

]

}

]

}

{% endschema %}

Replies 3 (3)

beauxbreaux
Shopify Partner
210 14 32

Hello,

 

This is a z-index problem. It is the CSS that needs to change. Typically you would want to change your nav menu items to be at a higher z-index. Because you have your nav menu wrapper set to fixed!importnat the z index wont work as it needs to be set to relative but I imagine you are doing it this way to keep your nav at the top(sticky). You could change this to sticky instead and the z-index should work. So for example:


 

 

.header-wrapper {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0; 
    z-index: 1000; 
}

 

 

 

TRY THIS ONE FIRST

But you could also try just changing the video z-index to a negative and that should do the trick.

 

 

.videoBackground .fullscreen-video-wrap {
    z-index: -1; 
}

 

 

Beaux Barker
Developer
Hire me on Fiverr
Luc1dd
Visitor
3 0 0

i am new to coding so can you tell me step by step where to put the code or you could edit the code above 

 

beauxbreaux
Shopify Partner
210 14 32

Here is the updated code. You can just copy and paste it over your old code starting at {%- if section.blocks.size > 0 -%}. If this is at the very top of that page you are good to just paste over it. If the update doesn't work just let me know as it would be a specificity issue. Basically that just means you have some other code that is overwriting it as it has higher priority for one reason or another. If that is the case we have some short cuts to solve it but I would rather not have you put !important if we don't have to. Just trying to help future proof your code keeping it clean. I assume you know how to get to this code as you gave it to me to begin with but if for whatever reason you need help getting back to this point just let me know. 

{%- if section.blocks.size > 0 -%}

    {%- for block in section.blocks -%}
    
    {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
    
     
    
    {% if block.type == 'video' %}
    
    <div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image | img_url: 'master' }}');{%- endif -%}">
    
     
    
    {%- if block.settings.video_link != blank -%}
    
    <div class="fullscreen-video-wrap">
    
    <video class="video-js" loop autoplay preload="none" muted playsinline
    
    poster="https:{{ block.settings.video_image | img_url: 'master' }}">
    
    <source src="{{ block.settings.video_link }}" type="video/mp4">
    
    </video>
    
    </div>
    
    {% endif %}
    
     
    
    <div class="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>
    
    <div class="videoBoxInfo">
    
    {% if block.settings.title != blank %}
    
    <h1 class="videoBoxInfoTitle" style="color: {{ block.settings.color_text }}">
    
    {{ block.settings.title | escape }}
    
    </h1>
    
    {% endif %}
    
     
    
    {%- style -%}
    
    .videoBackground .imageBoxInfoDescription p {
    
    color: {{ block.settings.color_text }}!important;
    
    }
    
    {%- endstyle -%}
    
     
    
    {% if block.settings.text != blank %}
    
    <div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
    
    {{ block.settings.text }}
    
    </div>
    
    {% endif %}
    
     
    
    {% if block.settings.button_link != blank and block.settings.button_label != blank %}
    
    <a href="{{ block.settings.button_link }}" class="videoBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
    
    {{ block.settings.button_label | escape }}
    
    </a>
    
    {% endif %}
    
    </div>
    
    </div>
    
    {% else %}
    
    <div class="imageBox" style="background-color: {{ block.settings.color_bg }}; {%- if block.settings.image_bg != blank -%}background-image: url('{{ block.settings.image_bg | img_url: 'master' }}');{%- endif -%}">
    
     
    
    <div class="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>
    
     
    
    <div class="imageBoxInfo">
    
    {% if block.settings.title != blank %}
    
    <h1 class="imageBoxInfoTitle" style="color: {{ block.settings.color_text }}">
    
    {{ block.settings.title | escape }}
    
    </h1>
    
    {% endif %}
    
     
    
    {%- style -%}
    
    .videoBackground .imageBoxInfoDescription p {
    
    color: {{ block.settings.color_text }}!important;
    
    }
    
    {%- endstyle -%}
    
     
    
    {% if block.settings.text != blank %}
    
    <div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
    
    {{ block.settings.text }}
    
    </div>
    
    {% endif %}
    
     
    
    {% if block.settings.button_link != blank and block.settings.button_label != blank %}
    
    <a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
    
    {{ block.settings.button_label | escape }}
    
    </a>
    
    {% endif %}
    
    </div>
    
    </div>
    
    {% endif %}
    
    {%- endfor -%}
    
     
    
    {% else %}
    
    <div class="placeholderNoblocks">
    
    This section doesn’t currently include any content. Add content to this section using the sidebar.
    
    </div>
    
    {%- endif -%}
    
     
    
    <style>
    
    .main-content .videoBackground {
    
    margin-top: -55px;
    
    }
    
    .videoBackground {
    
    height: 30%;
    
    position: relative;
    
    }
    
    .videoBackground .fullscreen-video-wrap {
    
    position: absolute;
    
    top: 0;
    
    left: 0;
    
    min-width: 100%;
    
    width: 100%;
    
    height: 100%;
    
    overflow: hidden;
    
    }
    
    .videoBackground .fullscreen-video-wrap .video-js {
    
    position: absolute;
    
    top: 0;
    
    left: 0;
    
    min-height: 100%;
    
    min-width: 100%;
    
    width: 100%;
    
    height: 100%;
    
    object-fit: cover;
    
    }
    
    .videoBackground .fullscreen-video-wrap video {
    
    min-height: 100%;
    
    min-width: 100%;
    
    object-fit: cover;
    
    }
    
    .videoBackground .videoBox {
    
    display: flex;
    
    align-items: center;
    
    justify-content: flex-end;
    
    flex-direction: column;
    
    padding: 100px 20px 80px;
    
    background-size: cover;
    
    background-position: center;
    
    background-repeat: no-repeat;
    
    min-height: 500px;
    
    max-height: 800px;
    
    height: calc(100vh - 165px);
    
    position: relative;
    
    }
    
    .videoBackground .imageBox {
    
    display: flex;
    
    align-items: center;
    
    justify-content: flex-end;
    
    flex-direction: column;
    
    padding: 100px 20px 80px;
    
    background-size: cover;
    
    background-position: center;
    
    background-repeat: no-repeat;
    
    position: relative;
    
    min-height: calc(100vh - 165px);
    
    height: auto;
    
    }
    
    .videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {
    
    z-index: 0;
    
    text-align: center;
    
    }
    
    .videoBackground .overlay {
    
    content: "";
    
    position: absolute;
    
    top: 0;
    
    right: 0;
    
    bottom: 0;
    
    left: 0;
    
    background: #000;
    
    z-index: 1;
    
    }
    
    .videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {
    
    -moz-user-select: none;
    
    -ms-user-select: none;
    
    -webkit-user-select: none;
    
    user-select: none;
    
    -webkit-appearance: none;
    
    -moz-appearance: none;
    
    appearance: none;
    
    display: inline-block;
    
    width: auto;
    
    text-decoration: none;
    
    text-align: center;
    
    vertical-align: middle;
    
    cursor: pointer;
    
    border: 1px solid transparent;
    
    border-radius: 2px;
    
    padding: 8px 15px;
    
    font-style: normal;
    
    font-weight: 800;
    
    text-transform: uppercase;
    
    letter-spacing: 0.06em;
    
    white-space: normal;
    
    font-size: 14px;
    
    margin-top: 20px;
    
    }
    
    .videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
    
    color: #FFF;
    
    font-size: 30px;
    
    line-height: 40px;
    
    }
    
    .videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {
    
    max-width: 500px;
    
    margin: 0 auto;
    
    }
    
    .videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {
    
    font-size: 18px;
    
    line-height: 28px;
    
    }
    
    .videoBackground .placeholderNoblocks {
    
    text-align: center;
    
    max-width: 500px;
    
    margin: 0 auto;
    
    }
    
    @media screen and (max-width: 767px) {
    
    .main-content .videoBackground {
    
    margin-top: -35px;
    
    }
    
    .videoBackground .fullscreen-video-wrap {
    
    z-index: -1;
    
    }
    
    .videoBackground .videoBox {
    
    min-height: 500px;
    
    height: 100%;
    
    position: relative;
    
    padding: 0;
    
    }
    
    .videoBackground .fullscreen-video-wrap {
    
    position: relative;
    
    min-height: 300px;
    
    }
    
    .videoBackground .videoBoxInfo {
    
    padding: 40px 20px;
    
    background: #000;
    
    width: 100%;
    
    }
    
    }
    
    </style>
    
     
    
    {% schema %}
    
    {
    
    "name": {
    
    "en": "Video Background"
    
    },
    
    "class": "videoBackground",
    
    "max_blocks": 1,
    
    "blocks": [
    
    {
    
    "type": "video",
    
    "name": "Video",
    
    "settings": [
    
    {
    
    "type": "url",
    
    "id": "video_link",
    
    "label": {
    
    "en": "Video link"
    
    }
    
    },
    
    {
    
    "type": "image_picker",
    
    "id": "video_image",
    
    "label": {
    
    "en": "Cover image"
    
    }
    
    },
    
    {
    
    "type": "range",
    
    "id": "overlay_opacity",
    
    "label": {
    
    "en": "Overlay opacity"
    
    },
    
    "min": 0,
    
    "max": 99,
    
    "step": 1,
    
    "unit": {
    
    "en": "%"
    
    },
    
    "default": 0
    
    },
    
    {
    
    "type": "header",
    
    "content": {
    
    "en": "Text"
    
    }
    
    },
    
    {
    
    "type": "text",
    
    "id": "title",
    
    "label": {
    
    "en": "Heading"
    
    },
    
    "default": "Video slide"
    
    },
    
    {
    
    "type": "richtext",
    
    "id": "text",
    
    "label": {
    
    "en": "Description"
    
    },
    
    "default": {
    
    "en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
    
    }
    
    },
    
    {
    
    "type": "color",
    
    "id": "color_text",
    
    "label": {
    
    "en": "Text color"
    
    },
    
    "default": "#ffffff"
    
    },
    
    {
    
    "type": "text",
    
    "id": "button_label",
    
    "label": {
    
    "en": "Button label"
    
    }
    
    },
    
    {
    
    "type": "url",
    
    "id": "button_link",
    
    "label": {
    
    "en": "Button link"
    
    }
    
    },
    
    {
    
    "type": "color",
    
    "id": "color_btn_bg",
    
    "label": {
    
    "en": "Background button color"
    
    },
    
    "default": "#ffffff"
    
    },
    
    {
    
    "type": "color",
    
    "id": "color_btn_text",
    
    "label": {
    
    "en": "Button text color"
    
    },
    
    "default": "#ffffff"
    
    }
    
    ]
    
    },
    
    {
    
    "type": "image",
    
    "name": "Image",
    
    "settings": [
    
    {
    
    "type": "color",
    
    "id": "color_bg",
    
    "label": {
    
    "en": "Background color (optional)"
    
    },
    
    "default": "#16165b"
    
    },
    
    {
    
    "type": "image_picker",
    
    "id": "image_bg",
    
    "label": {
    
    "en": "or use an image (required)"
    
    }
    
    },
    
    {
    
    "type": "range",
    
    "id": "overlay_opacity",
    
    "label": {
    
    "en": "Overlay opacity"
    
    },
    
    "min": 0,
    
    "max": 99,
    
    "step": 1,
    
    "unit": {
    
    "en": "%"
    
    },
    
    "default": 0
    
    },
    
    {
    
    "type": "header",
    
    "content": {
    
    "en": "Text"
    
    }
    
    },
    
    {
    
    "type": "text",
    
    "id": "title",
    
    "default": "Image slide",
    
    "label": {
    
    "en": "Heading"
    
    }
    
    },
    
    {
    
    "type": "richtext",
    
    "id": "text",
    
    "label": {
    
    "en": "Description"
    
    },
    
    "default": {
    
    "en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
    
    }
    
    },
    
    {
    
    "type": "color",
    
    "id": "color_text",
    
    "label": {
    
    "en": "Text color"
    
    },
    
    "default": "#ffffff"
    
    },
    
    {
    
    "type": "text",
    
    "id": "button_label",
    
    "label": {
    
    "en": "Button label"
    
    }
    
    },
    
    {
    
    "type": "url",
    
    "id": "button_link",
    
    "label": {
    
    "en": "Button link"
    
    }
    
    },
    
    {
    
    "type": "color",
    
    "id": "color_btn_bg",
    
    "label": {
    
    "en": "Background button color"
    
    },
    
    "default": "#ffffff"
    
    },
    
    {
    
    "type": "color",
    
    "id": "color_btn_text",
    
    "label": {
    
    "en": "Button text color"
    
    },
    
    "default": "#ffffff"
    
    }
    
    ]
    
    }
    
    ],
    
    "presets": [
    
    {
    
    "name": {
    
    "en": "Video Background"
    
    },
    
    "category": {
    
    "en": "Main"
    
    },
    
    "blocks": [
    
    {
    
    "type": "video"
    
    }
    
    ]
    
    }
    
    ]
    
    }
    
    {% endschema %}

 

Beaux Barker
Developer
Hire me on Fiverr