Transparent Header with Opacity of 20%

Hi there,

I am using Colorlibs Shapely in our new website and would like to make the header transparent with the opacity of black header to about 20% so the parallax image is visible through that. can someone please help.

The site is https://nihalenterprises.lk

Hello @nihalenterprises

I’m sorry to say that there is no such option available, and it’s not possible to achieve without making major modifications to the theme. I apologize for the inconvenience.

Regards,

Hello, @nihalenterprises

To make the header of your Shapely theme transparent with a 20% opacity, you can add custom CSS to your website. Here’s a CSS snippet that you can use:

/* Make header transparent with 20% opacity /
#site-navigation {
background: rgba(0, 0, 0, 0.2); /
Black with 20% opacity */
}

You can add this CSS to your website by following these steps:

Log in to your WordPress dashboard.
Navigate to Appearance > Customize.
Go to Additional CSS.
Paste the above CSS code into the text area.
Click Publish to save the changes.
This will set your header’s background to black with 20% opacity, allowing the parallax image to be visible through it. If you need further customization or if this doesn’t work as expected due to theme constraints, you might need to modify the theme files directly or seek assistance from a developer.

Best Regard,
diana658

Hi diana658,

Thank you for your input, we appreciate it. However, that code will not work, I’m afraid. Making a header semi-transparent will require a little more.

Regards,