How to add padding on top of logo in Polaris in mobile

Site URL: http://lotusinhand.com

Hi guys,

Am trying to add some white space on top of my logo in mobile mode. Right now my logo is stuck on the top of the page and I would like it to be a bit further down like it is in desktop mode. The template I am using is Polaris.

I tried adding customs CSS like the following:

@media screen and (max-width: 768px) {
  #page {
    padding-top: 100px;
  }
}
@media screen and (max-width: 600px) {
  #page {
    margin-top: 100px;
  }
}

But so far none of these have worked. Do you guys know what CSS code I can use to accomplish this?

Thanks!

It looks good on my end. Can you post a screen shot?

Hi rwp,

Here is a screenshot of what I see. I want the logo to be further down and for there to be some blank space above it. Thanks for replying!

Add to Home > Design > Custom CSS

a.Mobile-bar-branding {
    margin-top: 20px;
}

8 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

a.Mobile-bar-branding {
    margin-top: 20px;
}

 

Worked like a charm. Thank you so much!