- This topic has 13 replies, 4 voices, and was last updated 7 months, 3 weeks ago by
.
-
Posts
-
Hi,
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.
-RCustomer Support
Hi there,
in the Header > Element –> Site Header tab you can set the header to merged:
https://docs.generatepress.com/article/header-element-overview/#site-header
This gives you options to set the header / nav colors to transparent for that element.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Hi,
The setting under Site Header for Merge with Content is already set to Merge.
Still no joy.
🙁
Customer Support
Try removing this option:
https://docs.generatepress.com/article/header-element-overview/#offset-site-header-heightand set the top padding to 0 as well:
https://docs.generatepress.com/article/header-element-overview/#paddingLet me know 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Leooooo! You are genius! Thank you soooo much man. Worked like a charm.
🙂 🙂 🙂
No problem 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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?
Are you currently using the full-screen option?
https://docs.generatepress.com/article/header-element-overview/#full-screenThat 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 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/You the man Leo! Bloody brilliant lightning speed support. Thnx man!
No problem 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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:
- 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 - Assigned
display: none;to.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?
Thank you!
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-685231Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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. 🙂
No problem 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
- You must be logged in to reply to this topic.