How can I adjust the mobile header padding?

Store Design
, , , ,
1

How can I adjust the mobile header padding?

2

Horizon theme. It won’t let me post my site url

3

On Horizon, you normally adjust the mobile header padding inside the Theme Customizer. Look under Header > Mobile layout or spacing settings—many premium themes give you built-in controls for top/bottom spacing. If you don’t see it, that usually means Horizon limits direct adjustments and you’d need to rely on a CSS tweak instead.

Here’s the key: padding isn’t just about looks. Too much space pushes content down, hurting the “above-the-fold” view on mobile. Too little space makes your header look cramped and harder to tap. The sweet spot is balancing branding with usability.

:backhand_index_pointing_right: Do you want the padding adjusted mainly for a cleaner design, or are you trying to bring products/hero content higher on the screen?

4

Which padding do you want to adjust? Could you take screenshot?

6

My site on mobile layout needs padding above and below the logo and its touching the edges

7

Could you please take a screenshot of your site? Also, when you get a moment, could you check if that extra space is coming from any white space in your logo? I noticed your logo is square and might have some blank white space above and below.

8

My logo has been cropped right down. It fits perfect on desktop.

IMG_5763.PNG
IMG_5763.PNG1320Ă—2868 134 KB

9

@lev123 is it possible to share this page link?

10

It says: An error occurred: Sorry you cannot post a link to that host.

11

@lev123 can you send in messages?

12

You can try to add this code to Custom CSS in Theme settings and check

@media (max-width: 749px) {
.header-logo { 
  padding-top: 12px !important; 
  padding-bottom: 12px !important; 
}
}
13

I can help take a look here, just sharing your store URL.

14

Hello @lev123

  1. Go to Online Store → Themes → Edit Code
  2. Open your main stylesheet (usually base.css, theme.css, or styles.css under Assets)
  3. Add this code:
/* Fix cropped logo and adjust header padding on mobile */
@media (max-width: 749px) {
  .header_logo img {
    max-height: 60px; 
    height: auto;
  }

  .header {
    padding-top: 12px; 
    padding-bottom: 12px;
  }
}

Note: If the logo still looks a little tight, try increasing the max-height value to 70px or 80px until it looks right.