Adding white space above slider

Sydney
#1

Hi there,

I’d love to have one or two lines of white space above the slider on shepherdandhunter.com. Played around with things I don’t understand but couldn’t figure it out. Is there some additional CSS I could implement to have the white space before the header image/slider?

I’m especially eager to have some white space when the sticky header appears on scrolling down on mobile.

Thanks in advance,

Bob Lei

#2

Hi Bob,

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

Try adding this CSS code to your website’s Additional CSS.

    @media only screen and (min-width: 1025px) {
      .sydney-hero-area {
        margin-top: 82px;
      }
    }

Let me know whether it helps or not.

Regards,
Kharis
aThemes Support

#3

Thanks for your quick reply Kharis! It works for desktop, how to also get it for tablet and mobile phone? I increased the value hugely but without luck. Probably has to do with min-width: 1025 but I don’t understand why that’s set.

#4

Hi,

Thank you for getting back.

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

This mean the styles are only applied on a device’s screen resolution more than 1024px as the sticky header only presents on that size.

I’d recommend adding this code for mobile screen.

    @media only screen and (max-width: 1024px) {
      .site-header {
        border-bottom: 10px solid #fff;
      }
    }

Regards,
Kharis
aThemes Support

#5

Hi Karis,

Thanks again! I added it and noticed it worked on tablet and mobile, but the white space on the homepage of the deskstop site disappeared, and the menu now is in the same background as the header image. What to change in the CSS to have the white space on desktop again as your first CSS script enabled, and to have the brownish background color under the menu bar again?

Thanks a lot,

Bob