Transparent Header Issue - Forum | JoomShaper
Solved Helix Framework

Transparent Header Issue

Asked by Mark 10 months ago Last activity 10 months ago

Hi
I have this in custom CSS, however the transparent header is only showing on the home page. How can I correct this to show on all pages?

body.default-home #sp-header.transparent-header {
background-image: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);}

sp-header.transparent-header {

background: linear-gradient(180deg, #25522C 0%, rgba(0, 0, 0, 0) 100%);}
@media (max-width: 1199px) {

sp-header #sp-menu>div.sp-column>.sp-module {

    display: block;
    margin-left: 45px;
            }

            Not sure why some is in LARGE bold text, here.

Accepted answer

Marked as the solution
Mark Asked this
10 months ago

Thank you! All good now.

5 more replies

Oldest first Newest first Most helpful
Atick Eashrak Shuvo Staff
10 months ago

Hello Mark,

Sorry for the inconvenience you're experiencing. Could you please share your site URL so I can take a look?

Looking forward to your response.

Best regards

Mark Asked this
10 months ago

Also my hamburger is black, should be white. This all happened after updating SSPB and Helix

Atick Eashrak Shuvo Staff
10 months ago

Hello Mark,

Sorry for the inconvenience you're experiencing with the transparent header. Please add the following CSS code to your Template Options -> Custom Code -> Custom CSS:

#sp-header{
    background-image: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%) !important;
}

After that, please clear your Joomla cache and browser cache and check again. If this doesn't solve the issue, please reach out and I'll look into it more deeply.

Best regards

Mark Asked this
10 months ago

So do I remove all that CSS code in my first message, and add yours? I don't want to create even more issues.

Also, how do I now make the hamburger white?

Everything was fine before I updated Helix and SPPB.

Atick Eashrak Shuvo Staff
10 months ago

Yes you can remove your css ad add the provided one. To make the offcanvas-toggler white use this css

#offcanvas-toggler > .fa {
    color: #fff !important;
}
Atick Eashrak Shuvo Staff
10 months ago

Please marked the issue as solved

Log in to reply.