REPOSITIONING MENU ITEMS IN HEADER

Shopify Discussion

Topic summary

A Shopify store owner using the Dawn theme wants to split their header navigation menu: placing some items between the search icon and centered logo, and others between the logo and account icon on desktop view.

Solutions Provided:

Two community members offered CSS code solutions to be added to the theme’s base.css file:

  • First solution: Uses absolute positioning with nth-child selectors to move specific menu items (3rd and 6th) to desired locations
  • Second solution: Adjusts margins and positioning using negative top margin to reposition navigation elements

Follow-up Questions:

  • Store owner asks if the solution will work when menu items are replaced
  • Requests help reducing excessive left/right margins and better centering the logo, which currently appears slightly right-aligned
  • Developer provides updated CSS wrapped in media query to prevent affecting mobile view

The discussion remains open with the centering/margin adjustment being the latest focus.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
8

Add This css Like this

@media only screen and (min-width: 768px) {
nav.header__inline-menu li:nth-child(4) {
    margin-right: 80px;
}
a.header__heading-link.link.link--text.focus-inset {
    margin-left: 78px;
}

    .header:not(.header--middle-left,.header--middle-center) .header__inline-menu {
        margin-top: -7.95rem;
    }
	}

with this it did not affact your mobile view

Thanks