Center "Homepage" and align other links accordingly in the header?

Store Design

Topic summary

Goal: Center the “Homepage” menu item in the header navigation and have all other links align around it, while preserving existing dropdown functionality.

Context: Using a Shopify theme (references to theme.liquid, header.liquid, base.css/theme.css). The user needs to keep the current navigation output (for dropdowns) rather than hard-coded links.

Attempts/observations:

  • Pasted custom HTML and CSS into header.liquid; output didn’t match expectations (screenshot provided).
  • Tried placing CSS in base.css, theme.css, and theme.liquid with no visible effect.
  • Current CSS uses Flexbox (justify-content: center on .nav; flex-grow: 1 on .home-link) to push “Homepage” to center, but item length variance and Shopify’s generated markup may be interfering.

Open questions:

  • Where to correctly modify within the theme to affect the existing navigation output without breaking dropdowns?
  • How to integrate centering with the theme’s dynamic menu structure.

Artifacts: Two screenshots are central to understanding the misalignment and the current output.

Status: Unresolved; no confirmed solution yet.

Summarized with AI on December 30. AI used: gpt-5.
1

how do I “Center “Homepage” and align other links accordingly in the header”

I want to move Homepage center and have everything else follow homepage.

555.png
555.png1287×738 193 KB

2

I know you can move them accordingly, I want homepage center but it won’t really center due to other categories lengths.

3

How would that work with navigation I already setup? Like the navigation I have setup doesn’t output links? I need to keep the dropdown aspect and a link wouldn’t cover that unless its a page?

Also if this code does work with what I have already setup where would I modify this code? theme.liquid, header.liquid?

I pasted it in header.liquid and it outputted this:

1Capture.PNG
1Capture.PNG1423×250 11.4 KB

4

I also tried base.css and theme.liquid - no effect?

5

I’m using in theme.css and base.css. Still nothing.

"





"

base.css:
"

nav {
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
color: rgba(255, 255, 255, 1); /* White text color */
padding: 10px 0; /* Adjust padding as needed */
}

.nav {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
}

.nav li {
margin: 0 10px; /* Adjust this as needed */
}

.home-link {
font-weight: bold; /* Added bold effect */
text-decoration: none; /* Removed underline effect */
flex-grow: 1; /* Push Homepage link to the center */
}
"