[Resolved] Header slideshow shows up under static header image

Hi there,

It sounds like you’re trying to replace your site header/logo with the slider.

Are you wanting to do this only on a specific page?

If so, you’ll have to use a combination of GP Hooks and CSS.

First, get the ID of the page you want to display the slider on.

Then go into “GP Hooks > Before Header Content” and add the following (we’ll assume the page ID is 10):

<?php if ( is_page( 10 ) ) : ?>
      Shortcode in here
<?php endif; ?>

Then add this CSS to hide the regular header/logo:

.page-id-10 .site-logo {
      display: none;
}

A little more complicated, but the Page Header add-on adds the image/content above the content of the page – it doesn’t replace the site header.

Let me know if you need more info – more than happy to help 🙂

Hi Sue. Do you have the Backgrounds Add-on enabled? If so, check the Customizer > Background Images > Header.

I did some testing with adding metaslider to the header. You might need to adjust the sizes and positions for your particular site:

1. Remove the header image

2. In “GP Hooks > Before Header Content” add the slider shortcode [metaslider id=xx]

3. Add the following custom css:

/* position logo on top of slider */
.site-logo {
    position: fixed;
    top: 10%;
    right: 55%
}

/* keep logo left aligned in mobile view */
.fluid-header .inside-header {
    text-align: left;
}

/* collapse padding to fit slider height */
.inside-header {
    padding: 0;
}

Let us know if you get a chance to test that and how it works.

Hi Sue. One correction; the logo position should be absolute, not fixed:

/* position logo on top of slider */
.site-logo {
    position: absolute;
    top: 10%;
    right: 55%
}