How can I reposition the header menu items?

Store Design
, , ,

Topic summary

A user wants to reposition header menu items (cart, search, reward menu) from 1400px width to 1200px to align with their Replo page builder layout.

Solutions Provided:

  • Initial approach: Add custom CSS code above the </body> tag in theme.liquid file to adjust header width
  • Preferred solution: Add CSS to base.css/style.css/theme.css file targeting header elements with either:
    • Fixed width: max-width: 1200px;
    • Percentage-based: max-width: 70%;

Current Status:

The pixel-based solution works on desktop but doesn’t adjust on tablet/mobile devices. The helper recommends using percentage values instead of fixed pixels for responsive behavior across all screen sizes, allowing the header to scale proportionally on different devices.

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

Hey guys

How do I move the header items in the header?
The width is 1400px and I want the items to be moved into 1200px
I attached an image below - the X is approximately showing where I want the menu drawer, cart and search field to be moved to.

Thanks in advance!

move.png
move.png1568Ă—557 50.2 KB

1 Like
2

Hi @izy1 ,

Would you mind to share your Store URL website? with password if its protected. Or the preview would be okay. Thanks!

3

Hey @izy1
Kindly share your Store URL and Password if enabled

4

Hello @Moeed

The store is: drinkmidnite.com
and the password is: gahcli

5

Hey @Made4uo-Ribe

The store is: drinkmidnite.com
and the password is: gahcli

6

Hello @Everydaystore1

Thanks for the detailed response!
Where would I do step 1? Should I edit the code somewhere, or can I just do that as a custom CSS?

7

Hey @izy1

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

Moeed_0-1691152785038.png
Moeed_0-1691152785038.png1905Ă—466 37.9 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

8

Can’t I manually decide how many px widths it should have?

Im building my website on Replos page builder, and are only using the header from Shopify, and therefore it would be nice to manually be able to change the width so it will match the rest :slightly_smiling_face:

9

It definitely moved the items however.
But it needs to be aligned with the layout - thats why I was hoping to manually decide how many px :grinning_face_with_smiling_eyes:

4.png
4.png1035Ă—549 112 KB

10

Thank you for the information.

You like to move the header contents. I’ll give you the code, and you can play the width and change it whatever you like. Just be sure if you like to use the pixel add px; sime-colon on the last and not to delete any curly bracket.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
header.header.header--middle-center.header--mobile-center.page-width.drawer-menu.header--has-menu {
    max-width: 70%;
}

or

header.header.header--middle-center.header--mobile-center.page-width.drawer-menu.header--has-menu {
    max-width: 1200px;
}

Result:

Ribe_Dagandara_0-1691157917840.png
Ribe_Dagandara_0-1691157917840.png1363Ă—369 6.38 KB

I hope it help.

11

Thank you, it worked on the PC!
However nothing is changed on the tablet or the mobile.
Can that be changed aswell, or should I just mark this as the solution?

Thank you again!

1 Like
12

If you put pixel it wont change in the tablet and mobile. When you used % percent it will change. Try it youll see the difference. I like to use more the percentage.