Header height inconsistent between front page and other pages

Topic summary

A user encountered inconsistent header heights between the homepage and other pages on their Shopify store using the Trade template. The issue was particularly noticeable on mobile, where the store name’s vertical alignment shifted.

Troubleshooting attempts:

  • Adjusted store name padding (partial improvement)
  • Modified header height to a fixed value (negatively impacted mobile view)
  • Ruled out custom mega menu code and fonts as causes

Resolution:
The problem was traced to a font management app causing text wrapping issues. Once identified, the user was able to resolve the inconsistency.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.

Noticed recently while working on the website that the header/header elements height is inconsistent between the front page and other pages, every other page is fine except the front page. I edited the padding of the store name, which helped a little, but you can still see a difference if you click between pages. It’s also obvious on mobile, but its mainly the store name that changes height alignment than the whole header. I’m using the trade template with some custom code for the hover mega menu, but the custom code for the header isn’t affecting the header height. Also is not the fonts being used on the site. I changed the header height to a set number, but then it affected the mobile view. Not sure if it’s the store name or the nav bar links that are making the header alignment inconsistent.

website password is dechee

Hi, thanks for the info! This actually helped a lot, I figured out the wrapping was coming from the app I was using for the fonts with your info.

1 Like