shopify how to add transparent background to header

hello everyone,welcome back to the channel in this,video we will make some hack on the,shopify theme,basically we will make a navigation bar,overlap with the hero image for the,debut theme,similar to what you see in the brooklyn,theme,let's go back to the online store in our,admin interface,then let's click the customize button in,the live theme section,now click the image with text overlay,section,scroll down to the section height drop,down box and choose extra large here,now let's click the save button on the,top right corner,and click the exit button on the top,left corner now get to the coding part,don't be scared it is not hard let's,click the edit code menu in actions drop,down,search css inside the search box on the,left,and click theme.scss.liquid,press control plus f on the keyboard to,open the code search box and type dot,site dash header in the search box,the first one is not what we want let's,click the down arrow to find the next,one,now we find the place we need to update,let's add a new css snippet right under,so it only takes effect on the home page,and won't affect other pages,first let's put background color equals,transparent to make the top bar,transparent,then let's set the position to absolute,to make the top bar overlap with the,hero image,then let's change the z index to 1 to,prevent hero,image hiding the top bar,finally we set the border bottom to zero,to remove the bottom line of the top bar,now we are all set let's save what we,have done and refresh the home page of,our store to see what happens,it works perfectly as we can see the,home page of the debut theme,now looks like the brooklyn theme,that is all for today's video if you,enjoy the video,please click the like button and,subscribe to the channel see you next,time

Congratulation! You bave finally finished reading shopify how to add transparent background to header and believe you bave enougb understending shopify how to add transparent background to header

Come on and read the rest of the article!