Smartslider under transparent Navigation / Header

Hi team,
I am trying to use the Smart Slider plugin for a Home page I am creating, but face some issues. I am trying to create a slightly transparent Navigation Header, so the Slider image should be slightly visible through the Header and Navigation. In > Customise > Header I have selected 'Use Navigation as Header'.

Initially I simply added the Smart Slider to the Home Page itself, but this places the Smart Slider below the header and not behind it. If there is a way to do this on the page editor, i am happy to run with that. If not I am happy to try the Header Element if I can get it to work.

So instead I tried to add the SmartSlider to a Header Element but cannot seem to get anything happening at all. I have read lots of threads about this including your article https://docs.generatepress.com/article/header-element-overview/ which doesn't seem to work.

I place [smartslider3 slider="2"] shortcode into Header Element and set to Merge with content and set page location to 'Home', but nothing happens. I even tried adding this to the style.css and still no luck;

<?php
echo do_shortcode('[smartslider3 slider="2"]');
?>

What am I missing for the Header Element to not work.

As I said, all I want is for the Smart Slider to reach the very top of the Home Page and slightly transparent Navigation to sit over the top of it.
The slider is currently set up using the Home Page editor

Thanks