Slider appears behind navigation on mobile

Hi there,

Instead of using sections to complete this layout, I would recommend using our page header add-on as it's actually design to achieve that:
https://docs.generatepress.com/article/page-header-overview/

You can add the slider as page header content:
https://docs.generatepress.com/article/page-header-content/

With full screen option:
https://docs.generatepress.com/article/page-header-content/#fullscreen

Then follow the steps here to merge:
https://docs.generatepress.com/article/merging-the-page-header-site-header/

Thanks for the reply! I did follow what you said and that didn't work. Now there is the white space above the slider with the logo and navigation. We want the logo and nav on top of the slider. I changed the settings to put content behind and that solved it on desktop, however on mobile it results the same as I already have.

Essentially we want the desktop version to look like this current page: https://sportyscatering.com
But the mobile should look like this page (when you size it down to mobile): https://sportyscatering.com/testing

Thanks!

Can you link me to the page where you attempted my solution so I can see what isn't working?

https://sportyscatering.com/testing

This one isn't working. We want the logo and nav to overlay the slider. But in mobile we want it below the logo/nav.

Looks like it's merged already and you can change the navigation color for it here:
https://docs.generatepress.com/article/merging-the-page-header-site-header/#custom-navigation-colors

No, I don't need to change the colors. I need the logo and nav on top of the slider, not above it.

On desktop it should look like this: https://sportyscatering.com

But on mobile I want the slider to drop down so the logo/nav isn't on top of the slider. So https://sportyscatering.com/testing is doing exactly what I want it to do on mobile. But it's not doing what I want it to do on desktop. The slider should be flush with the top with the logo and nav on top of the slider only on desktop.

This is how we want each to look (desktop left, mobile right). Right now https://sportyscatering.com/testing does not look like this on desktop.

It's probably something really stupid, I just have no idea what I am doing ;)

On that page, do you have the "Place content behind header" option checked?: https://docs.generatepress.com/article/merging-header-navigation-content/#merging-our-header

Tom,

That did fix it on desktop. However we don't want it to do that on mobile. We want the content below so it looks like the above mobile example.

Which page are you working on now? I just checked https://sportyscatering.com/testing and it's not merged?

Check now.

https://sportyscatering.com/testing

Mobile is wrong. We don't want the slider behind the nav or logo at all on mobile.

Add this CSS:

@media (max-width: 768px) {
    .generate-combined-header {
        position: relative;
    }
}

To remove the white space below, see my answer here: https://generatepress.com/forums/topic/header-with-slider-not-resizing-for-smaller-screens-with-elementor/#post-474526

Goodness gracious this worked! you guys are the best!

Glad we could help!