[Resolved] Placing the header over a Smart Slider

[Katharine]

Hello, I am trying to place the header of this website https://roryforbeslange.live-website.com/ (in progress) over the Smart Slider images but I can’t figure out how via CSS. I’m not sure if this is a question for you or Smart Slider but I’d really appreciate the help! So, the background of the menu / header would be the image in the carousel.

Example of what I want here, though I would put some transparency on the header to ensure it’s readable the:https://www.alanshapirophotography.com/

Thank you,
Katie

[Katharine]

Sorry and I tried looking in the forum and saw you said to someone else ‘You’d need to need to use a plugin (Smart Slider) and just add it using a header element.’ but I don’t understand where you can add smart slider. Thanks!

[David]

Hi there,

you don’t need any other plugins as you already have a slider.

Go to Appearance > GeneratePress and enable the Elements Module.
Then in Appearance > Elements create a new Header Element:

https://docs.generatepress.com/article/header-element-overview/

In the header element, skip the first view and go to Site Header tab and enable the Merge with Content option. This will enable the Navigation colors option where you can edit the nav colors.

Then set the Display Rules to Front Page

[Katharine]

Hi David,

Thanks for your help. I already had merge content turned on with the hero element – I’ve drafted that and created a new one but it still doesn’t merge. I then tried it on a page without the slider and it works fine with a featured or custom image (https://roryforbeslange.live-website.com/about) so is it an issue with the slider? Or do I need to put the slider in a specific type of block to make it work?

Thank you,
Katie

[David]

I am not seeing a Header Element on the Front Page?
Can you make sure one is enabled and its display rules are set to Front Page

[Katharine]

Sorry, I was showing you that it worked on About so I changed it. Have changed it back so you can see.
Thanks
Katie

[David]

Aah ok – its actually working but the Container Top Padding of 96px is stopping the slider from hitting the top of the viewport.

I assume you can add the Slider using a shortcode?
If so – remove it from the Page Content and add it your Header Elements hero content.

[Katharine]

Ahhhh so there is!! Thank you it’s all working now!!

[David]

🙂 Glad to be of help

[Author]

Posts