- This topic has 13 replies, 4 voices, and was last updated 1 year, 6 months ago by Leo.
August 6, 2019 at 9:01 am #977296webyogi
I am working on a demo and I want to integrate a full page image slider in the header section of the home page with logo and menu overlay.
Something similar to https://www.dalmahoyhotelandcountryclub.co.uk/ While this website has a video background, I would like to use a full page image slider.
Please can you guide me, I tried using the Elements component but when I insert the slider short code in the content section, the slider appears below the menu. I am using Smart Slider 3 (free version), could it be that the free version does not support full page/screen ? If it is slider limitation then kindly suggest a slider that integrates/works well with GeneratePress for my needs.
Big fan of GeneratePress!
Thanks in advance.
-RAugust 6, 2019 at 9:25 am #977312DavidStaffCustomer Support
in the Header > Element –> Site Header tab you can set the header to merged:
This gives you options to set the header / nav colors to transparent for that element.August 6, 2019 at 10:15 am #977361webyogi
The setting under Site Header for Merge with Content is already set to Merge.
Still no joy.
🙁August 6, 2019 at 10:22 am #977367LeoStaffCustomer Support
Try removing this option:
and set the top padding to 0 as well:
Let me know 🙂August 6, 2019 at 10:29 am #977381webyogi
Leooooo! You are genius! Thank you soooo much man. Worked like a charm.
🙂 🙂 🙂August 6, 2019 at 10:30 am #977384LeoStaffCustomer SupportAugust 6, 2019 at 10:48 am #977393webyogi
OK Leo, One last thing. So it looks great on desktop but on the mobile version the slider again shows up below the site title tag. Please can you help?August 6, 2019 at 11:50 am #977434LeoStaffCustomer Support
Are you currently using the full-screen option?
That won’t work as the slider itself is responsive.
Can you try unchecking the full screen option and just make sure the slider itself is big enough to be full screen?
Let me know 🙂August 6, 2019 at 12:08 pm #977447webyogi
You the man Leo! Bloody brilliant lightning speed support. Thnx man!August 6, 2019 at 12:21 pm #977461LeoStaffCustomer SupportJanuary 26, 2020 at 2:57 pm #1145054Daniel
I’m using GP 2.4.1. I successfully added a full-screen slider on my home page, but I’m not sure I used the most efficient method:
January 26, 2020 at 3:52 pm #1145082LeoStaffCustomer Support
- Created new Hook element and assigned it “after_header” bc I want it to appear under the top bar and with the main navigation menu overlaid,
- Pasted in the slider shortcode and checked “Execute Shortcodes”,
- (What is the “Priority” setting for?)
- Added negative top margin to slideshow so nav would overlay it,
- Gave the slideshow
z-index: -1;so nav would be accessible
.inside-headerdiv, otherwise there were 15px of white space above and beneath my nav bar.
That seems to be working, but the method seems a bit klugy. Any recommendations for improvements?
Your method should work.
David provided a solution here using the header element instead of hooks element:
https://generatepress.com/forums/topic/insert-background-images-slider-effect-in-page-hero-element-without-plugin/#post-685231January 26, 2020 at 4:09 pm #1145090Daniel
Ok, sounds like I’m on the right track. No real obvious way to do it without a tiny bit of hackery. Thanks for your quick response. GP is amazing. 🙂January 26, 2020 at 4:33 pm #1145102
- You must be logged in to reply to this topic.