[Resolved] Header slideshow shows up under static header image

Home Forums Support Header slideshow shows up under static header image

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #134461
    Sue

    I’ve added a test slideshow using the Meta-Slider plug-in and putting the short code into the content section of the header box on the home page, using the header add on as shown here, 2nd video https://generatepress.com/knowledgebase/generate-page-header/. Instead of replacing the header image that was there prior, it adds the slideshow directly underneath it.

    I thought, easy fix, I’ll just remove the static header image from the homepage. And I’ve been all over the dashboard, the customize theme section, everywhere, and I can’t even find how I added that static header image in the first place. I feel stupid.

    Basically I just want to slideshow where the header image goes. In this case I have the header image above the navigation.

    #134506
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #135344
    Sue

    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.

    #135357
    bdbrown

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

    #135363
    Sue

    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?

    #135416
    bdbrown

    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.

    #135417
    Sue

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

    #135438
    bdbrown

    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%
    }
    
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.