Header slider shifts down on smaller screens


On my page header slider shifts down like 100px when screen size is reduced. It leaves the logo on the blank white background. Could you tell me how to fix this please, I’ve looked everywhere and can’t find the answer. This happens every time logo shifts from top left corner to the top centre of the screen.

Any hints would be much appreciated.


Thanks a bunch

Hello there,

Thank you for reaching out to us here.

Try adding the CSS code below into your site’s additional CSS option (Appearance > Customize > Additional CSS).

@media only screen and (max-width:1024px){
    position: absolute !important;
    background-color: transparent !important;

Let me know how it goes. I’ll wait to hear back from you regarding your stats.


I would just like to add that this is not an actual issue. On smaller sizes the menu bar is moved outside of the slider in order to free up space. And that white background on which the logo sits is actually the menu background color, which in your case is set to white and can be controlled from Customize > Colors.

Thanks Kharis,

The code has resolved my problem, however it has also created a new one. Now the front page site line and tagline sit too high when loaded on mobile screens, and are covering the menu button.

Can I add some padding on top of the siteline/tagline/call to action button combo?

Thanks, I appreciate your help a lot.

EDIT: I have resolved the issue described in the previous post, but I’m still looking for a solution to fix the following:

Can I set the minimum header height for all pages (except home) at minimum of 250px? I need to cover the logo and menu button on small size screens.