How to make header transparent - Influence Theme

Store Design
,
1

URL: https://1v27tuhni88jbj8n-17240367.shopifypreview.com

I’ve tried a few code snippets but I still seem to be having troubles with making the header on the homepage transparent (not the announcement bar).

emekayode_0-1706456909765.png
emekayode_0-1706456909765.png1897×215 64.2 KB

Is there a quick way for me to do this?

2

Hey @emekayode ,

I’m seeing you alot haha.

This should work for you. Just put them in between some tags from earlier.

header-main,
header, 
header * {
    background-color: transparent !important;
}

header {
    position: absolute !important;
    width: 100%;
    border: none !important;
    top: 0 !important;
    z-index: 50 !important;
}
3

Strange that it didnt work for me before, that worked perfectly! No more questions from me today lol you’ve helped me enough

4

Haha no problem, if you have issues raise them :grin:

One more thing I noticed,

Please add the extra part “z-index: 50 !important”, if not you can’t click on the search, cart and logo

header-main,
header, 
header * {
    background-color: transparent !important;
}

header {
    position: absolute !important;
    width: 100%;
    border: none !important;
    top: 0 !important;
    z-index: 50 !important;
}
5

thanks a lot for that I really appreciate it

6

You can try this solution: