using the page title menu option and a linear gradient - Forum | JoomShaper
Solved Helix Framework

using the page title menu option and a linear gradient

Asked by Karen Dunne 6 months ago Last activity 6 months ago

In the Page Title tab of a menu item, there's an option to add a background color to overlay the image. See screenshot: https://go.screenpal.com/watch/cOe6oanZxl3

I'd like that to be a linear gradient. But, when I try to add a linear gradient via custom css, it doesn't work because it results in the actual background instead of an overlay. See screenshot: https://go.screenpal.com/watch/cOe6oGnZx2u

I've used a background color before and reduced the percentage to allow for the image to show through, e.g. rgba(0, 0, 0, 0.66). But I'd like to use a gradient instead.

How can I achieve a linear gradient as an overlay to the background image?

Accepted answer

Marked as the solution
Rashida Rahman Staff
6 months ago

Hi there!

Thanks for reaching out.

Please try the following sample code in your custom CSS:

.sp-page-title {
    position: relative;
    overflow: hidden;
}

.sp-page-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 100%);
    z-index: 1;
}

.sp-page-title .container {
    position: relative;
    z-index: 2;
}

Here is all about custom code placement in the Helix Ultimate framework:
https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta

Best regards,

2 more replies

Oldest first Newest first Most helpful
Karen Dunne Asked this
6 months ago

This is perfect, just what I needed. Thank you, Rashida. I appreciate it.

Rashida Rahman Staff
6 months ago

Glad that I could help and you are always welcome:)

Have a nice day!

Log in to reply.