How can I reposition the menu to be in the middle without affecting the product pages.
I want to keep this as it is on the product pages!
Topic summary
Goal: Center the menu without changing how it appears on product pages. Screenshots (central to understanding) show different header/menu positioning between pages.
Diagnosis: A responder notes the header appears positioned over the navigation bar with a transparent background, likely causing the misalignment.
Proposed fix: Add a CSS rule in the Shopify theme’s main layout file.
- Navigate: Online Store > (… on current theme) > Edit code.
- Open theme.liquid and locate the style tag.
- Add: .site-header { position: initial !important; }
- Save and reload the site.
Rationale: Setting position: initial resets the header’s positioning so it doesn’t overlay the nav, which may allow the menu to sit centered as intended.
Status: No confirmation yet from the original poster that this resolves the issue or preserves the product page layout. Discussion remains open with one actionable suggestion and pending feedback.
website: moroccanplus.com
It looks like you header is being positioned over you nav bar with a transparent background.
You can try adding this to you “theme.liquid” file within your code editor. To get to your code editor, click on “Online Store” under “Sales Channel” in the side menu. Then, click the “…” next to your current theme and select “edit code”.
From here, locate your “theme.liquid” file and open it. Locate the {% style %} tag, you can search for it with control + f ( windows) and cmd + f (mac).
once you’ve located the {% stye %} tag in the above image, paste the following lines directly below it.
.site-header { position: initial !important; }
Click save and reload your site.
Let me know if that was the result you are after.