Background video behind the header

ALBI0NE
Visitor
2 0 0

Hi, I want to place a video under my header so that the navbar would be transparent and video in the background. I added some code, and I have a video background section, but I cannot make it go under the navbar. The navbar would be transparent, but the buttons and logo would still be visible. I use origin theme 

Replies 3 (3)

EBOOST
Shopify Partner
623 182 199

Hi @ALBI0NE ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Layout/theme.liquid
3. Add code below to end of file and before </body> tag

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
       $(document).ready(function(){
        var scroll = $(window).scrollTop();
         if($('.announcement-bar-section').length > 0){
           $('.section-header').css('top', $('.announcement-bar-section').outerHeight() + 'px')
         }else{
           $('.section-header').css('top', '0')
         }
         if(scroll > 0)
            $('.section-header').css('top', '0')
       });
    </script>
    <style>
      .cbb-homepage .section-header {
        position: fixed;
        left: 0;
        width: 100%;
      }
      .cbb-homepage .section-header.scrolled-past-header {
        top: 0!important;
      }
      .cbb-homepage .section-header .header-wrapper { background: none;}
    </style>

EBOOST_0-1690948203274.png

 

Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


DONATE


EBOOST
ALBI0NE
Visitor
2 0 0

Hi I have added the code to my theme, what should I do next?

jsdme
Visitor
1 0 0

it is saying something like this and not working
Avoid parser blocking scripts by adding `defer` or `async` on this tag