- This topic has 7 replies, 2 voices, and was last updated 6 years, 10 months ago by Leo.
-
AuthorPosts
-
December 4, 2017 at 2:57 am #441132Jim
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?
December 4, 2017 at 8:34 am #441368LeoStaffCustomer SupportHi 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 🙂
December 5, 2017 at 2:36 am #442031JimHi 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
December 5, 2017 at 4:19 pm #442629LeoStaffCustomer SupportCan 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/
December 6, 2017 at 1:09 am #442820JimHi 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
December 6, 2017 at 6:46 am #442968JimHi 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 );
}December 6, 2017 at 6:49 am #443025JimOops it chopped of the div.
<div class="fixedpos">[layerslider id="1"]</div>
December 6, 2017 at 8:15 am #443078LeoStaffCustomer SupportGlad you found the solution and thanks for sharing!
-
AuthorPosts
- You must be logged in to reply to this topic.