How to readjust header height?

Highlighted
New Member
2 0 0

I am using the 'Simple' theme. I have my own logo inserted. For some reason the header is moving the whole page down to accomodate the height of my logo. It appears as if nothing can go into the gap to the right of the logo. The site looks rediculous with a giant blank space.

Is there any way to readjust the page content up, and have it disregard the logos padding?

Many thanks for any help!

Merritt

0 Likes
Shopify Partner
868 6 145

Hi Merrit,

Sure can. You'd need navigate to Themes > Actions > Edit code and open Assets / theme.scss.liquid and look for

.main-content {
  overflow: hidden;
}

Now add

.main-content {
  overflow: hidden;
  
  @include media-query($medium-up) {
    margin-top: -70px;
  }
}

What we've added there is a negative margin towards the top which effectively pulls the main content container up. However, we only want this happening on large desktop views (it would look wrong in mobile view which is layed out differently) so we add the media query as well and instruct it to only apply this margin if the viewport size is medium or larger i.e. desktop browsers.

Of course, you can adjust the margin-top value to what looks best with your theme and logo.

Best wishes!

I turn coffee in to code - since 1998
1 Like
New Member
2 0 0

Fantastic! Thanks Karl!

Thank you for the explanation too. As someone who only understands the basics of the code behind Shopify i appreciate any extra insight and guidance!

Thanks again, it has worked a charm!

0 Likes