Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Fixed slider panel

Home Forums Support Fixed slider panel

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #441132
    Jim

    Does anyone know how I can replicate this slider effect (in GP) where it remains fixed whilst the page content scrolls up to obscure it?

    https://www.mowglistreetfood.com/

    GP Premium 1.5.5
    #441368
    Leo
    Staff
    Customer Support

    Hi there,

    First you would need a plugin to create the slider. Something like Smart Slider 3.

    Then you can add it in as Page Header Content:
    https://docs.generatepress.com/article/page-header-overview/
    https://docs.generatepress.com/article/page-header-content/

    Once you are there, link us to the page and we can help with some additional CSS to fix it 🙂

    #442031
    Jim

    Hi Leo,

    Sorry for the late reply. I have setup a ‘slider’ header on a dummy page here: http://www.clairerendall.com/parallax-header-test/ I’ve also cobbled together a function to move the masthead and main navigation below the new header as per my example https://www.mowglistreetfood.com/

    Many thanks for your offer of assistance and I look forward to seeing your CSS.

    Jim

    #442629
    Leo
    Staff
    Customer Support
    #442820
    Jim

    Hi Leo,

    The header ‘Content’ section parallax effect doesn’t seem to work anymore?

    Adding the shortcode (or even a static image) into the ‘Content’ section of the header has no effect whatsoever. The only way I can get any parallax effect to work is to add an image into the ‘Image’ section and even then I have to add a blank space or another image into the ‘Content’ section to get it to work?

    This example is just using two static images and not a slider: http://www.clairerendall.com/parallax-header-test/

    Regards

    Jim

    #442968
    Jim

    Hi Leo,

    I managed to solve my fixed slider header problem without using the parallax option.
    http://www.clairerendall.com/parallax-header-two/

    Many thanks for your help and suggestions.

    Just in case anyone else runs into this problem…

    My home page uses Sections so I set them to ‘Full Width’ & ‘Contained’ with a background color, which acts as a mask. I added a ‘fullwidth ‘ class to each Section panel to adjust it so it was the same width as the rest of the site. ‘Full Width’ & ‘Contained’ for the ‘Primary Nav’ and ‘Header’ in ‘Customise’ too.

    Added a div around the slider shortcode in Page Header > Content

    [layerslider id=”1″]

    Then set the Header to ‘Full Screen’ and ‘Vertical Center Content’.

    Then a bit of CSS
    /*Adjust ‘Full Width’ inner container edges to same width as ‘Contained’*/
    .fullwidth .generate-sections-inside-container {
    max-width: 1020px;
    padding: 0;
    }
    /*Set home page fixed slider*/
    .fixedpos {
    position: fixed;
    top: 0;
    z-index: -1 !important;
    }
    .inside-header {
    max-width: 1020px;
    box-sizing:border-box;
    }

    I wanted my Page Header to be above the ‘Header’ and ‘Nav bar’ so I added this to Functions:

    /* Move header above menu */
    add_action( ‘after_setup_theme’,’jh_move_header’ );
    function jh_move_header() {
    remove_action( ‘generate_header’,’generate_construct_header’ );
    add_action( ‘generate_after_header’, ‘generate_construct_header’, 15 );
    }

    add_action( ‘after_setup_theme’,’craig_move_navigation’ );
    function craig_move_navigation() {
    remove_action( ‘generate_after_header’, ‘generate_add_navigation_after_header’, 5 );
    add_action( ‘generate_after_header’, ‘generate_add_navigation_after_header’, 20 );
    }

    #443025
    Jim

    Oops it chopped of the div.
    <div class="fixedpos">[layerslider id="1"]</div>

    #443078
    Leo
    Staff
    Customer Support

    Glad you found the solution and thanks for sharing!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.