Transparent header for product page

Hey team,

My product page header is transparent but it’s still it’s own block, I’m wanting to have a photo in behind the header for every product page (similar to my home page). See attached.

URL:

Any help would be massively appreciated!

https://ap-perform.com/products/pulsepro%E2%84%A2-massage-gun

Hi @Nato0201 ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css ,theme.css or styles.css

Step 3: Insert the below code at the bottom of the file → Save

sticky-header.header-navigation-wrapper {
    position: fixed !important;
    width: 100vw !important;
}

.halo-block.halo-banner.image-banner {
    padding-top: 0 !important;
}

.header-nav-hamburger > .container-full:before {
    height: 0 !important;
}

a.header__menu-item.header__menu-item.list-menu__item {
    color: #ffff !important;
}

.header-navigation .header__icon svg {
    fill: #ffff !important;
}

Here is result:

Hope this can help you
Kind regards,

HDL-Shin

Legend, works perfect for desktop but do you know the code so it applies to mobile also?

There’s also a shadow outline on the header, any chance we could remove this also?