How to condense the header buttons on homepage?

Shopify Discussion

Topic summary

A user wants to adjust header button positioning on their Shopify store homepage, specifically moving the hamburger menu (left), search, and cart buttons (right) inward toward the center with approximately 25% margins on each side.

Initial Response:

  • One responder misunderstood the request, thinking it was about vertical centering rather than horizontal spacing.

Proposed Solution:
Another contributor (PageFly-Oliver) provided CSS code targeting component-collection-hero.css:

  • Navigate to Online Store → Theme → Edit code
  • Locate the component-collection-hero.css file
  • Add custom CSS at the bottom: .collection-hero__description.ctr { margin-top: 50px !important; }

Status:
The discussion remains open with no confirmation whether the proposed solution addresses the horizontal spacing requirement. The CSS snippet appears to target vertical margin rather than the requested horizontal button repositioning.

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

Hello all, I am trying to push the homepage header buttons in towards the center of the screen, maybe 25% margins on the right and left. Is this possible? I don’t know if I’m explaining it right, so just let me know what questions you have. Thank you!

www.shortcomings.store

pass: aloe

1 Like
2

Hi @shortcomings

Do you mean left and right side? It is already center. You mean up and down center. Then try this.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Theme.liquid” folder, find the tag paste this code before this tag:
  • And Save.

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Hey Ribe, I am talking about the hamburger menu icon on the left, and the search and cart buttons on the right. I would like to bring those in towards the center, if that makes sense.

4

Hi @shortcomings ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file component-collection-hero.css

Step 3: Paste the below code at the bottom of the file → Save

.collection-hero__description.rte{
margin-top:50px !important
}

PageFlyOliver_0-1693013350072.png

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly