Add slider behind the header logo

You could use the Page Header add-on.

In "Advanced Settings", choose to merge the header, and enable the "Place content behind header" option.

Hi Tom

Sorry, but I'm very new to this - where do I find "Advanced Settings" - I've looked everywhere I can think of.

No worries!

In the Page Header metabox: https://generatepress.com/knowledgebase/generate-page-header/

Hi Tom

I don't have that tab in my Page Header Metabox.
It was there for a second but then disappeared again.
I only have Image/Content/Logo settings.

I'm using GP ver 1.3.39

I also just realized that this is for a page header.
I would like this to be for the site header that will appear on all my pages.

Ah I understand.

It's not easy to do I'm afraid.

You could try adding something like this into the "Before Header Content" hook:

<div class="fixed-slider-background">
    Your slider shortcode in here
</div>

Then add this CSS:

.fixed-slider-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.site-branding,
.site-logo,
.header-widget {
    z-index: 2;
    position: relative;
}

.site-header {
    overflow: hidden;
}

.metaslider .theme-default .nivoSlider,
.metaslider .theme-default .nivoSlider img {
    height: 100%;
}

Untested, but should be a decent start.

Thanks Tom

That code worked, but the only thing now is that the logo and menu bar is stuck behind the slider images.
I tried changing the z-index values, but this puts the slider either all the way back behind the header background.

Any ideas?

Any chance you can show me?

Hi Tom

Website is http://www.nirvanatourssa.com

If you need access to the wordpress editor just let me know where I can email a temporary login details for you.

Regards
Geordie

Ah, try adding it into the Before Header Content hook instead of the Before Header hook.

Still no change when placing it in "Before Header Content" hook.
Also, it doesn't resize correctly when viewing in tablet or mobile mode.
The slider doesn't seem to be actually replacing the header background, but rather floating on top of it - if that makes any sense to you.

I just adjusted the CSS above: https://generatepress.com/forums/topic/add-slider-behind-the-header-logo/#post-220821

There's no way to make it the actual background unless you find a plugin that specifically does that.

This is the only way to make a slider act like a background I'm afraid - at least the only way that I'm aware of.

Aah Tom, a big ups to you man.
That works just fine.
I'll have to buy you a coffee when payday rolls by next.
Thanks for all your assistance - and patience.
Geordie

You're welcome, I'm glad I could help :)