[Resolved] Full Page Slider as a background in the Header using Element

[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.
-R

[David]

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.

[webyogi]

Hi,

The setting under Site Header for Merge with Content is already set to Merge.

Still no joy.

🙁

[Leo]

Try removing this option:
https://docs.generatepress.com/article/header-element-overview/#offset-site-header-height

and set the top padding to 0 as well:
https://docs.generatepress.com/article/header-element-overview/#padding

Let me know 🙂

[webyogi]

Leooooo! You are genius! Thank you soooo much man. Worked like a charm.

🙂 🙂 🙂

[Leo]

No problem 🙂

[webyogi]

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?

[Leo]

Are you currently using the full-screen option?
https://docs.generatepress.com/article/header-element-overview/#full-screen

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 🙂

[webyogi]

You the man Leo! Bloody brilliant lightning speed support. Thnx man!

[Leo]

No problem 🙂

[Daniel]

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:

1. 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,
2. Pasted in the slider shortcode and checked “Execute Shortcodes”,
3. (What is the “Priority” setting for?)
4. Added negative top margin to slideshow so nav would overlay it,
5. Gave the slideshow z-index: -1; so nav would be accessible
6. 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!

[Leo]

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-685231

[Daniel]

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. 🙂

[Leo]

No problem 🙂

[Author]

Posts