[Resolved] Photo-slider like background in Header (under site-logo, site-branding)

[Roman]

Hello, is there any possibility to have a photo-slider like background in Header (under site-logo, site-branding)?
Or maybe another way – I already tried to use Elements – Hook generate_header – with “Disable Site Header” with SlidersPack plugin – photoslider is working almost correctly (only one thing is strange – photos are showing from up to bottom until the whole page is loaded – this behavior is not wanted…), but I’m not able to put above this slider my site-logo and site-branding (image and text).
Thanks for help, I already tried a lot of ways without success..

[Leo]

Hi Roman,

It’s a bit tricky but can you first add the slider using a block element hook with before_header hook?
https://docs.generatepress.com/article/block-element-hook/

Then we can try some CSS to make it work.

Let me know 🙂

[Roman]

Hello Leo,
thanks for answer.
It is already there on test page: https://www.lipova-obec.cz/photoslider
So on this page: div=site-logo, div=site-branding and div=lipova-pocet should be above a photoslider.
Background image, which is under site-logo, site-branding and lipova-pocet now, will not be there – want to replace it by photo slider.

One note: it can be my own text and image, there is no need to be strictly a site-logo and site-branding (from WP menu).
Thanks.

[David]

Hi there,

does the slider plugin provide options to add Text and Image overlays ?

[Roman]

If I know, no – I’m using a SlidersPack (https://wordpress.org/support/plugin/sliderspack-all-in-one-image-sliders/) with bxSlider choosen. Do you know some slider with this feature?

[David]

To the best of my knowledge it is premium slider plugins that offer that kind of feature.
What you could try is to hook the slider inside the header and then make the site branding overlay it.

Can you change the sliders hook to generate_before_header_content and then ill look to see if we can use CSS to position the branding over it.

[Roman]

Already done generate_before_header_content:
https://www.lipova-obec.cz/photoslider

[David]

OK, so remove this CSS:

.inside-header {
    /* background: url('images/pozadi.JPG') no-repeat; */
    /* -- muze byt i jinak - nahradou funkce generate_spacing_css ve child functions.php */
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 80px;
    padding-bottom: 62px;
}

And try adding this CSS:

.inside-header {
    padding: 0;
    display: grid;
    grid-template-columns: 15% 70% 15%;
    align-items: center;
}
.inside-header * {
    grid-row: 1;
    z-index: 10;
}
.inside-header .wp-spaios-slider-wrap {
    grid-row: 1;
    grid-column: 1 / -1;
    z-index: 1;
}
.inside-header .site-logo {
    grid-column: 1 / 2;
}
.inside-header .site-branding {
    grid-column: 2/ 3;
}
.inside-header .lipova-pecet {
    grid-column: 3/ -1;
}

[Roman]

Perfect, it is working now! Thanks a lot for a great support!

[David]

Awesome – glad to be of help!

[Roman]

Hello, maybe one more question related to this problem. Is there any way, how to have slider in full header width, but logo/branding info only in limited width (auto, max-width 1100px)?
Now, if I change the header width to full, then logo/branding info goes off layout of main content (logo goes too much to left, pecet goes too much to right – I want to have them aligned based on main content width).
I need something like this:
grid-template-column: auto max-width-1100px auto
and inside max-width-1100px column have that three columns /logo/branding/pecet.
Hope it is clear…

[Roman]

[David]

It would be a lot easier if all the site branding was in its own div wrap but you could try:

1. Set the Customizer > Layout > Header –> Width & Inner Width to Full Width.

2. Change your CSS to this:

.page-id-12499 .inside-header {
	background: none;
	background-color: #fecc00;	
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 100px 2fr 100px 1fr;
    align-items: center;
}
.page-id-12499 .inside-header * {
    grid-row: 1;
    z-index: 10;
}
.page-id-12499 .inside-header .wp-spaios-slider-wrap {
    grid-row: 1;
    grid-column: 1 / -1;
    z-index: 1;
}
.page-id-12499 .inside-header .site-logo {
    grid-column: 2 / 3;
}
.page-id-12499 .inside-header .site-branding {
    grid-column: 3 / 4;
}
.page-id-12499 .inside-header .lipova-pecet {
    grid-column: 4 / 5;
}

see this line:

grid-template-columns: 1fr 100px 2fr 100px 1fr;

Here we create a grid that has 2 1fr ( 1 fraction ) columns that create the empty space either side of the branding.
We then then have 100px for the logo 2 fractions for the title, and 100px for the other logo.

It may need a little tweaking.

[Roman]

I understand, where is your target, but also agree with you:
– It may need a little tweaking
– It would be a lot easier if all the site branding was in its own div wrap
I think better is the option with own DIV, there is a possibility to do it, for exam I can make it this way:

Customizer > Layout > Header –> Width & Inner Width to Full Width.

<header full width>
  <div wp-spaios-slider-wrap>slider</div>
  <div branding - max width 1100, left/right auto margin, above slider - how to set??? >
    <div site-logo 100px></div>
    <div site-branding auto width></div>
    <div lipova-pecet 100px></div>
  </div>
</header>

Will it be useful?

[David]

Do you use the Block Editor ?
Just wondering whether it would be easier to rebuild the header using the GP Block element.

If not then we can look at changing the markup

[Author]

Posts