Hi,

Thank you for reaching out.

The issue you’re encountering is related to the SCSS compiler not processing variables correctly (e.g., $offcanvas_menu_icon_color in theme.scss).

To resolve this, please disable the SCSS to CSS compiler from your Helix Ultimate settings:

Go to Template Options → Advanced → Disable “Compile SCSS to CSS”.

After that, kindly clear your site and browser cache, then check again.

If the issue persists, please let us know.

Best regards,

See hidden

I didn't see any error here.

Please, add screenshot of your issues or clear your joomla and browser cache.

Thanks

See hidden

See hidden

Please, check now. I have added this css into CAD template also.

body.view-article #sp-header,
body.view-calendar #sp-header,
body.com_eventbooking #sp-header{
  background: rgba(0,0,0,0.8) !important;
height: fit-content;
}

Thanks

See hidden

Ha Ha Ha, Why 'SO CLEVER'?

If everything is working fine now, please mark the question as complete by accepting any of our answers.

Thank you!

Help please

Hello,

Please, replace previosu code with this:

body.view-article #sp-header,
body.view-calendar #sp-header,
body.com_eventbooking #sp-header,
.view-page #sp-header{
  background: rgba(0,0,0,0.8) !important;
height: fit-content;
}

.itemid-373 .sp-page-builder .page-content #section-id-deb38458-2696-46a8-9996-4e6ca7ff3aae {
    padding-top: 0 !important;
    }

If everything is working fine now, please mark the question as complete by accepting any of our answers.

Thank you!

Thank you but now we have lost the transparent effect before scroll, no dramas as at least the travel bit has a header you can read but would be nice to have if possible? x

Hello,

Thank you for your feedback.

The current CSS makes the header background permanently dark on that page, which is why the transparent effect before scrolling is no longer visible.

Please, add transparent color instead of solid color.

Thank you!

Can you resend the code so I can replace it please as I need to sort this - thank you in advance ;)

Here is the code:

body.view-article #sp-header,
body.view-calendar #sp-header,
body.com_eventbooking #sp-header,
.view-page #sp-header{
  background: rgba(0,0,0,0.8) !important;
height: fit-content;
}

.itemid-373 .sp-page-builder .page-content #section-id-deb38458-2696-46a8-9996-4e6ca7ff3aae {
    padding-top: 0 !important;
    }

If everything is working fine now, please mark the question as complete by accepting any of our answers.

Thank you!

Please see hidden

Hello,

From my check, the image is already starting from the top and right side. However, since you are using a standard image module/addon, it is not displaying at full width.

To make it full width, you will need to set the image container to width: 100% (and ensure there is no padding or margin applied from the parent container).

If everything is now working correctly, please mark this question as resolved by accepting one of our answers.

Thank you!