Help Needed with Splitting Homepage Menu in Dawn Theme

Store Design
,

Topic summary

A user seeks to split their navigation menu in the Dawn theme, positioning half the menu items on each side of a centered logo.

Initial Solution Provided:

  • Create two separate menus (“Left Menu” and “Right Menu”) in Shopify Admin under Navigation
  • Edit the header.liquid file to reference both menus using Liquid code
  • Add CSS to float the left menu left and right menu right, with the logo centered between them
  • Code snippets provided for both the Liquid template modifications and CSS styling

Follow-up Issue:
Another user reports the suggested solution didn’t work. They found alternative CSS code that successfully splits the menu by:

  • Using absolute positioning on the navigation
  • Adding right margin to the 4th menu item and left margin to the 5th item
  • Adjusting z-index values

However, this approach breaks the logo’s homepage link functionality. The discussion remains unresolved, with the user requesting guidance on fixing the logo link issue in their CSS-based solution.

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

Hello Shopify Community,

I need your assistance. I would like to split the menu on my homepage so that half of the menu items are on one side of the logo and the other half are on the opposite side, with the logo centered in the middle of the page. How can I achieve this using the Dawn theme?

My website is not online yet.

Thank you for your help!

Best regards,
Tania

1 Like
2

Hi @Letitania ,

Step 1: Create Separate Menus in Shopify Admin

Go to your Shopify admin panel.

Navigate to Online Store > Navigation.

Create two new menus, for example, Left Menu and Right Menu. Add the desired links to each menu.

Step 2: Access the Theme Code

Log in to your Shopify admin panel.

Go to Online Store > Themes.

Find the Dawn theme and click on “Actions” > “Edit code”.

Step 3: Edit the Header File

Find the header.liquid file in the Sections folder.

Open the header.liquid file.

Step 4: Modify the Menu Code

You need to use the menus you created in the Shopify admin panel.

Replace the existing menu code with the following:


  {% assign left_menu = linklists['left-menu'] %}
  {% if left_menu.links.size > 0 %}
    {% for link in left_menu.links %}
      {{ link.title }}
    {% endfor %}
  {% else %}
    

No items in Left Menu

  {% endif %}

  
    
  

  {% assign right_menu = linklists['right-menu'] %}
  {% if right_menu.links.size > 0 %}
    {% for link in right_menu.links %}
      {{ link.title }}
    {% endfor %}
  {% else %}
    

No items in Right Menu

  {% endif %}

Step 5: Style the Menu with CSS

Find the theme’s CSS file in the Assets folder (e.g., theme.css or theme.scss.liquid).

Add CSS rules to style the left and right menus and position them accordingly:

.menu-left {
  float: left;
  display: inline-block;
}

.logo {
  display: inline-block;
  text-align: center;
  margin: 0 auto;
}

.menu-right {
  float: right;
  display: inline-block;
}

.site-navigation a {
  padding: 10px;
  text-decoration: none;
  color: #000;
}

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

3

Hi there, this didn’t seem to work,

I have found some code that seems to work when pasting into theme.liquid, but then the logo doesn’t link you back to the homepage, please help!

What would I change below??

@media (min-width: 1300px) { .header nav.header__inline-menu { position: absolute; z-index: 1; } .header nav.header__inline-menu .list-menu li:nth-child(4) { margin-right: 210px; } .header nav.header__inline-menu .list-menu li:nth-child(5) { margin-left: 50px; } .header .header__heading { z-index: 1; } }