Awaiting an answer Templates

Make Header Transparent

Asked by Dinuka 4 years ago Last activity 4 years ago

I need to make a transparent header on educon template. I tried the below CSS, but i can't get image under the header.

 #sp-header {
  background: #transparent! important;
}
#sp-header.menu-fixed {
 background: #660000  !important;
}

https://fcms.kln.ac.lk/dep/d3

https://prnt.sc/U75BjCcaXzaK

9 replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
4 years ago

Hi,

Thanks for contacting us. Could you please give me your site URL so that I can check?

-Regards.

Mehtaz Afsana Borsha Staff
4 years ago

Give me your super admin access please I need to check.

Anne Staff
4 years ago

Hello there,

Please use this code:

#sp-header {
    background: transparent !important;
    position: absolute;
    box-shadow: none;
}

-Regards

Dinuka Asked this
4 years ago 
#sp-header {
    background: transparent !important;
    position: absolute;
    box-shadow: none;
}

with this code, can't add top bar
@Mehtaz here with i am sending admin access

Mehtaz Afsana Borsha Staff
4 years ago

Isn't it ok now?

Screenshot 2022-07-13 at 11.58.12 AM.png

Dinuka Asked this
4 years ago

before scrolling, I need a transparent header. when it is scroll it should be with the background color.

Mehtaz Afsana Borsha Staff
4 years ago

If possible please give me a demo what's kind of actually you are looking for.

Anthony Johnston
4 years ago

Your header is transparent. The color that you can see is because the background is set to color #880000 which is displayed behind the transparent header.

The easiest way to fix this is to set the top margin of the section underneath the menu to a negative value (the height of your header which is 90px) which will push it up and hide the color

Log in to reply.