Help Needed with Splitting Homepage Menu in Dawn Theme

[Letitania]

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

[Sweans]

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:

<div class="menu-left">
  {% assign left_menu = linklists['left-menu'] %}
  {% if left_menu.links.size > 0 %}
    {% for link in left_menu.links %}
      <a href="{{ link.url }}">{{ link.title }}</a>
    {% endfor %}
  {% else %}
    <p>No items in Left Menu</p>
  {% endif %}
</div>

<div class="logo">
  <a href="{{ routes.root_url }}">
    <img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}">
  </a>
</div>

<div class="menu-right">
  {% assign right_menu = linklists['right-menu'] %}
  {% if right_menu.links.size > 0 %}
    {% for link in right_menu.links %}
      <a href="{{ link.url }}">{{ link.title }}</a>
    {% endfor %}
  {% else %}
    <p>No items in Right Menu</p>
  {% endif %}
</div>

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