Home Slider desktop vs. Mobile

I have a built a black bar area into the top of my MAIN HOMEPAGE slider so the logo remains visible. Looks good on desktops but has more space than I would like on the mobile versions.

Any suggestions to make this look better on mobile devices?

Here is the site:
http://stoutbarandgrill.com

Thanks so much.

Hello there,

Please try adding the below CSS code to Appearance > Customize > Additional CSS from your site dashboard (/wp-admin). And see if it helps.

    @media only screen and (max-width:1024px) {
      .site-header,
      .site-header.fixed,
      .site-header.float-header {
        position: absolute !important;
        top: 0;
      }
    } 

Regards,
Kharis

Wow Kharis! That did exactly the trick on the homepage… however, it now cuts into the TEXT on the all other PAGES on mobile only.

This code also gets rid of the HEADER CONTACT info on mobile only.

see examples here:
http://stoutbarandgrill.com/about

http://stoutbarandgrill.com/contact

http://stoutbarandgrill.com/menu

Again, it is just on the mobile.

Thanks.

(I’ve since added an image to push the cut off items back down in the meantime)

Hello there,

Please try adding this extra CSS code:

    @media only screen and (max-width:767px) {
      body:not(.home) .sydney-hero-area {
        margin-top: 60px;
      }  
    } 

Regards,
Kharis

This one created a few additional issues.

No worries. The first solution you provided works well enough.
I can make it work with that original CSS you provided.

Thank you again.