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 :)

Thanks for the info.

Now she says she doesn't need the slideshow, she just wants to change the header image. And I can't find any way to do this. I've looked everywhere. She wants the image changed that is behind the logo. http://642.57d.myftpupload.com/

It looks to be a background image for the header logo section.

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

A-HA! Thank you. that was it! I had been looking for a file name somewhere, and I didn't notice the "remove" link in that position. Thank you so much!

So, if she does decide she wants a slideshow in that same spot, I would remove that background image and then use the PHP and CSS you gave me? Would it then, the slideshow, show up behind the logo?

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.

Okay, thanks a lot. This may come in handy. Thanks for all your help!

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%
}