[Resolved] Add slider behind the header logo

[Nirvana Tours SA]

Hi Tom

How do I float my header logo over a slider?

I have placed a slider in the header area, but my site logo remains bellow the slider – I would like it to float over the slider.

[Tom]

You could use the Page Header add-on.

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

[Nirvana Tours SA]

Hi Tom

Sorry, but I’m very new to this – where do I find “Advanced Settings” – I’ve looked everywhere I can think of.

[Tom]

No worries!

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

[Nirvana Tours SA]

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

[Nirvana Tours SA]

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.

[Tom]

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.

[Nirvana Tours SA]

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?

[Tom]

Any chance you can show me?

[Nirvana Tours SA]

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

[Tom]

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

[Nirvana Tours SA]

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.

[Tom]

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.

[Nirvana Tours SA]

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

[Tom]

You’re welcome, I’m glad I could help 🙂

[Author]

Posts