- This topic has 13 replies, 4 voices, and was last updated 1 year, 1 month ago by
Leo.
-
AuthorPosts
-
August 6, 2019 at 9:01 am #977296
webyogi
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.
-RAugust 6, 2019 at 9:25 am #977312David
StaffCustomer SupportHi 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/August 6, 2019 at 10:15 am #977361webyogi
Hi,
The setting under Site Header for Merge with Content is already set to Merge.
Still no joy.
π
August 6, 2019 at 10:22 am #977367Leo
StaffCustomer SupportTry 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/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 #977384Leo
StaffCustomer SupportNo problem π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 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 #977434Leo
StaffCustomer SupportAre 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/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 #977461Leo
StaffCustomer SupportNo problem π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 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:
- 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-header
div, 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!
January 26, 2020 at 3:52 pm #1145082Leo
StaffCustomer SupportYour 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/January 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 #1145102Leo
StaffCustomer SupportNo problem π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.