Hi, basic tip: https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action

Use custom CSS from template options or custom.css file - then put this code:

#sp-header { background-color: black; }

This does not replicate the behaviour of id=".has-slideshow#sp-top-bar where there is no slider; i.e. black with 20% transparency (so the image shows through) and then when you scroll down the page black with 50% transparency.

It simply gives a black menu bar which becomes white when you scroll down the page.

I know how to use the code inspector but it does not allow me to follow the logic that I have described.

Thanks

Tom

I gave you only inspiration, any time you can set:

#sp-header { background-color: rgba(0,0,0,0.5); }

You can use rgba() color codes:

1. the first 3 values are for rgb
2. the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (fully opaque)

Yes, I already know how to do that. You have not answered the question. Inspection does not reveal the class/id of the sticky menu in order that I can apply the correct css to it. Nor does it reveal how to have an image (except when using your slider (which I do not want to use) behind the transparent menu.

Maybe easier would be just share URL. Ones you talk about Resort from Joomshaper then about template from Apikko/Apliko? which we don't support!

But I wil try to guess...

.menu-fixed#sp-header {
    background-color: rgba(0,0,0,0.5)  !important;
    height: 80px;
}

"Inspection does not reveal the class/id of the sticky menu...." In my opinion - it does. If you would scroll down you should see extra class is added "menu-fixed".

About Header height , in some templates it's preset in template styles as it's inside Resort. And in that case custom CSS is needed.

#sp-header {height: 80px;}
.sp-megamenu-parent > li > a,
.has-slideshow#sp-header .sp-megamenu-parent > li > a {line-height: 80px;}

I hope it's what you wanted?

Link is enclosed. I am not using a template from Apliko. I am using your "Restort" template. What I am using is their slider module as it is much more flexible than Joomshaper's.

So my questions are about the css for Resort.

I wish to help but all I see is ....

Fatal error: require_once(): Failed opening require...

but I gave you tips for Resort template anyway, have you tried them.

This template may not work with PHP 7.4, try older version.

I had to take site down and rebuild. Back up now. I repeat everything I have said. The issue remains...

Link is enclosed. I am not using a template from Apliko. I am using your "Restort" template. What I am using is their slider module as it is much more flexible than Joomshaper's.

So my questions are about the css for Resort.

Your suggestion does not replicate the behaviour of id=".has-slideshow#sp-top-bar where there is no slider; i.e. black with 20% transparency (so the image shows through) and then when you scroll down the page black with 50% transparency. It simply gives a black menu bar which becomes white when you scroll down the page.

....and instead of white header you want black with transparency?

Might be best to start again so that we are all clear. In the Resort template using Joomshaper's slider, the menu appears to be black with a transparency of around 70% and you can see the image sitting behind it. If one doesn't use Joomshaper's slider, the menu bar appears as a solid colour and the image sits after (i.e. below) the menu bar.

I wish to achieve the same result using, let's just say an image, where the menu bar has a level of transparency that you can see through it to the image with the image effectively sitting behind the menu bar. I think that the remainder of the requirement has been resolved.

Thank you again for your help.

This should help for desktop view:

@media (min-width: 1023px) {
.sp-page-builder .page-content #section-id-1624289627535 
{margin-top: -80px !important;}
}