How can I fix alignment issues with my homepage header?

Store Design

Topic summary

A user encountered header alignment issues on their homepage, specifically with the logo not aligning properly with icons. The problem affected the mobile view, though they had successfully fixed the desktop version by scaling the logo.

Solution Provided:

  • Add CSS code to theme.liquid file before the </body> tag
  • Navigate to: Online store >> Edit code >> theme.liquid
  • Insert media query targeting mobile devices (max-width: 767px) to adjust .drawer-menu h1 padding

Outcome:

  • The CSS fix successfully resolved the mobile alignment issue
  • User confirmed the solution worked and thanked the responder

Note: Some text in the original post appears reversed/garbled, but the core technical solution and resolution are clear.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

I need some help with my website, the header on the Main Page got messy and the logo doesn’t sit right with the icons and it’s not aligned anymore, luckily the header on the Product Page remained intact so I want to see if i can copy it and paste it on the Main Page so they look identical again. I got to fix it on the desktop version by scaling the logo but it doesn’t work on mobile, is there anything i can do to fix it?

Website: www.storeolympia.com (View on mobile)

I’d like to make the Main Page Header identical to the Product Page.

2

Hello, @itsfrizzy

Please add the below code above in theme.liquid

Online store >> edit code >> theme.liquid

@media (max-width: 767px){
.drawer-menu h1 {
    padding-top: 0px !important;
}
}

after added the given code look,

shreyhweb_0-1699209578914.png
shreyhweb_0-1699209578914.png850×1440 148 KB

If our solution is helpful for you then please like and accepted solution.

You can contact us if you have any doubt about shopify store.

Thankyou :slightly_smiling_face:

1 Like
3

Yes it worked, thank you so much for the help

1 Like
4

Hi @itsfrizzy

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

@media (max-width: 767px){
 .drawer-menu h1 {
    padding-top: 0px !important;
 }
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly