Desktop: Move slider down by height of the header

Hi,

I would like to move down the slider on desktop by the height of the header so that header and slider don’t overlap as it is when you open mobile or tablet version. How is this possible?

Homepage: https://www.hendrikbornholdt.de

Best regards,
Hendrik

Hi Hendrik,

I hope you’re doing well today.

Thank you for contacting us about our theme Sydney Pro. I am happy to help with your queries.

You can achieve it by adding this simple CSS code to your site’s Additional CSS under the Customize menu.

    @media only screen and (min-width: 1025px) {
      .site-header {
        position: static !important;
      }
    }

If you have caching enabled, you may need to flush it before reloading your site. Otherwise, the web browser may only load the cached version of your website and you may not able to see the changes.

Regards,
Kharis
aThemes Support

Thanks for your support. I added the code and the header is sticky.

  1. But the header still overlaps the slider. Is there a possibility to move down the slider?

  2. When you scroll down then there is some kind of scrolling effect visible on the slider on Desktop. Is it possible to remove this effect as the behavior is on Tablet and Mobile?

Best regards
Hendrik

Hi Hendrik,

Thank you for getting back.

As checked again, it seems likely you have added some changes that resolves your issues. Here’s my screencast when checking.

sydney-header

Please do let me know if I missed anything and you need further assistance.

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support

Hi Kharis,

everything is fine on mobile and tablet. But the behavior is not as expected on desktop. The slider is still overlapped by the header. Please compare the slider and header on desktop and mobile. Some part of my face is cut on desktop site but this is not the case on mobile and tablet.

I hope that the attached screenshots explain the issue better :slightly_smiling_face:

Best regards
Hendrik

image

Hi Kharis,

do you have a solution for the issue?

Best regards
Hendrik

Hi Hendrik,

​Please accept my apologies for the delay in response. I really appreciate your patience.

Try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {

      body:not(.siteScrolled) .slides-container .slide-item {
        background-position: 50% 70px !important;
      }
      
    }

You may clearing any active cache, history, or cookie before reloading your site to see the result.

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support

Hi Kharis,

the solution works perfect when I open the homepage. But as soon as I scroll down with mouse wheel then the slider jumps up little bit. Maybe this is due to the parallax scrolling effect on the slider on desktop. How can I remove the parallel scrolling effect on desktop for the slider?

Stay healthy.
Enjoy your day.

Best regards,
Hendrik

Hi Hendrik,

For that request, now you can remove the code I suggested and replace it with this one:

    @media only screen and (min-width: 1025px) {

      .slides-container .slide-item {
        background-position: 50% 70px !important;
      }
      
    }

Regards,
Kharis
aThemes Support

Hi Kharis,

I replaced the code. But the behavior is still not correct. The Parallax Scrolling effect is still available on the slider. Please have a look at my homepage.

Best regards,
Hendrik

I guess that I found a solution:

@media only screen and (min-width: 1025px) {
	.slides-container .slide-item {
		background-position: 50% 0px !important;
		background-attachment:inherit !important;
	}
}
1 Like

Great! Glad to hear you found your solution and thank you for sharing it here. I really appreciate it.

Regards,
Kharis
aThemes Support