[Resolved] Fixed slider panel

[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/

[Leo]

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 🙂

[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

[Leo]

Can you actually try the parallax effect in page header? https://docs.generatepress.com/article/page-header-content/#parallax-effect

You can also change the speed so it’s more aggressive: https://docs.generatepress.com/article/generate_page_header_parallax_speed/

[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

[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 );
}

[Jim]

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

[Leo]

Glad you found the solution and thanks for sharing!

[Author]

Posts