How do I move the Menu to the left instead of being stacked?

Store Design
, , , , , , ,

Topic summary

A user seeks to reposition their website’s navigation menu from a stacked/centered layout to the left side of the header.

Solution Provided:

  • Add CSS code targeting the .header--top-center class
  • The code modifies grid-template-areas and sets justify-self: left for the inline menu
  • Works on screens 990px and wider (desktop view)

Implementation Note:

  • Original instructions suggested adding code to theme.liquid with <style> tags
  • User clarified the CSS should be placed in base.css instead
  • The solution was confirmed working with a screenshot showing the menu repositioned to the left

Status: Resolved. A follow-up question about implementation details remains unanswered.

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

Hi there!

How do I move the Menu to the left instead of being stacked?

I can’t find the option, can you help me?

Website: https://plenitudvital.es/

kingdom2_0-1729709688677.png
kingdom2_0-1729709688677.png1492×547 48.3 KB

Thanks!

1 Like
2

Hi @kingdom2

Try this one.

  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 “theme. Liquid” file. Find the tag and paste the code below before the tag.

@media screen and (min-width: 990px) {
    .header--top-center {
        grid-template-areas:
        "navigation heading icons";
    }
    .header--top-center .header__inline-menu {
        justify-self: left;
    }
}

And Save.

Result:

Made4uoRibe_0-1729711953900.png
Made4uoRibe_0-1729711953900.png1666×303 25.3 KB

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
3

Thanks @Made4uo-Ribe , small remark the code goes in base.css

4

Oh, sorry forgot to add the tag.

Welcome! Would you mind hitting ‘like’ as well? Thanks!

5

How do you add it all together