Centered logo with split navigation in header (Dawn Theme)

Store Design
, , ,

Topic summary

A user is attempting to create a split navigation layout in Shopify’s Dawn theme, with a centered logo and two menu links on each side.

Current Issue:

  • Following an existing tutorial, the navigation successfully splits but the left-side links are positioned too far left, overlapping with the search icon
  • The spacing doesn’t adjust properly across different screen widths
  • The user wants equal distance between links and logo that responds to viewport changes

Technical Details:

  • Custom CSS was added via a new custom.css file in the Assets folder
  • The CSS includes margin adjustments and nth-child selectors to split the menu
  • Code snippet provided shows attempts to control menu item positioning and pointer events

Status:

  • A community member (AnneLuo) offered assistance and requested store access
  • Store credentials were shared privately via email
  • The issue remains unresolved as the original poster follows up, still seeking a solution to adjust link spacing
Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

I’m trying to split my navigation links so that there are 2 on either side of the centered logo. I found a related tutorial and while it did work to split the navigation, the first 2 links are too far to the left and overlapping with the search icon (for most screen widths). I want the 2 links to be equal distance from the logo on each side that also adjust with screen width.

This is the custom css I added as instructed by the tutorial:

  1. Themes > More Options > Edit Code

  2. Assets > add a new asset > create a blank file > create a custom.css

  3. In theme.liquid find (Ctrl+F): {{ ‘base.css’ | asset_url | stylesheet_tag }}

  4. Paste underneath the base.css line:

  5. Open custom.css in Assets and paste the following:

.header__inline-menu {
position: absolute;
top: 25%; /* Adjust’s verticle position */
pointer-events: none; /* Disables Menu */
}

/* Chooses which menu item to target */
.list-menu–inline li:nth-child(#) { /* Change ‘#’ to the position (number) of the menu item to add the margin after */
margin-right: 175px; /* Adds a margin to break the menu in half */
}

/* Activates Menu Buttons */
.header__menu-item {
pointer-events: auto;
}

Can anyone help me adjust the spacing of the links? Thanks so much!

Screenshot for reference:

Screenshot 2024-10-21 at 4.39.50 PM.png
Screenshot 2024-10-21 at 4.39.50 PM.png2746×404 64.3 KB

2

Hi, @thanksforhostin

Can you please share the store URL so that I can assist you?

3

Hi Anne - thank you!

site: 4krvmd-zc.myshopify.com
password: reblia

4

I have checked your store. I can help you with it. But it needs to add some custom code. If you need my help, please let me know.

5

I sent you an email, thank you.

6

Hi @AnneLuo - just checking to see if you received my message or email. Still looking to solve this issue. Thank you.