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

[Roman]

No, I do not use the Block editor.
But I use Elements. I can use hook “generate_header” with “Disable Site Header” setting and put my code inside the element:

<header class="site-header" id="masthead" aria-label="Web" itemtype="https://schema.org/WPHeader" itemscope="">
[sliders_pack id="6238"]
   <div class="branding ???">
     <div class="site-branding">
       <h1 class="main-title" itemprop="headline"><a href="http://localhost:81/lipova-obec/" rel="home">Obec Lipová</a></h1>
       <p class="site-description" itemprop="description">site description</p>
     </div>
     <div class="site-logo">
       <img class="header-image is-logo-image" alt="Obec Lipová | Zlínský kraj" src="http://localhost:81/lipova-obec/wp-content/uploads/2020/05/lipova-znak-116x116-pruhledny.png"></a>
     </div>
     <div class="lipova-pecet">
       <img class="header-image" alt="Obec Lipová | Zlínský kraj - pečeť" src="https://www.lipova-obec.cz/wp-content/uploads/2016/09/pecet-116x114.png" title="Obec Lipová | Zlínský kraj - pečeť">
     </div>
   </div>
</header>

where [sliders_pack id=”6238″] is shortcode for div-slider…
Then header is full width (customize layout – full inner/outer width) and div-branding is wrap around all branding divs and can be max-width 1100px margin left/right auto.
But I can not find the right way, how to set this limited width and place it above header.

[David]

Can you hook that HTML in ? And i can look at the CSS for sizing and positioning.

[Roman]

Is it OK?
https://www.lipova-obec.cz/photoslider

[David]

Yep 🙂
You should only need this CSS now:

.page-id-12499 .site-header {
    background: none;
    background-color: #fecc00;	
    padding: 0;
    display: grid;
    align-items: center;
}
.page-id-12499 .site-header > * {
    grid-row: 1;
    grid-column: 1 / -1;
}

As we now only have 2 direct children of the site-header we can simply use set ALL ( > * ) to be on the same row and full the same grid columns.

[Roman]

Perfect! Only Z-index was missing, now it is working exactly by our expectation…

.page-id-12499 .site-header {
    background: none;
    background-color: #fecc00;	
    padding: 0;
    display: grid;
    align-items: center;
    z-index: 1;	
}
.page-id-12499 .site-header > * {
    grid-row: 1;
    grid-column: 1 / -1;
    z-index: 10;	
}
.page-id-12499 .inside-header {
	background: none;
}

Thank you for the great support, you are one of the few in a long time who really helped me!

[David]

Glad to be of help 🙂

[Author]

Posts