Center Logo With Menu Links On Both Sides

It looks like you have a Shrine theme but I have not had a chance to work with it.

But it might be header.liquid or a similar name, or search in files “header__inline-menu”. Like I said first find in schema where main menu is defined, so for example if you have

{
      "type": "link_list",
      "id": "menu",
      "default": "main-menu",
      "label": "t:sections.header.settings.menu.label"
    },

add a secondary menu below, like

{
      "type": "link_list",
      "id": "secondary-menu",
      "default": "secondary-menu",
      "label": "t:sections.header.settings.menu.label"
    },

Then find in the code for a menu that starts with


Copy it and paste it after the logo code

# 
   
     
   

In that new code change class and also change code from menu to secondary_menu from settings


You would need some CSS changes, they go to different lines

// line 2064

  .header--middle-center {
    grid-template-areas:
      "navigation heading secondary-navigation icons";
    grid-template-columns: 2fr auto 1fr 1fr;
    column-gap: 2rem;
  }
// line 2277

.header__inline-menu {
  margin-left: -1.2rem;
  grid-area: navigation;
  display: none;
}
.header__inline-menu-secondary {
  margin-left: -1.2rem;
  grid-area: secondary-navigation;
  display: none;
}

// line 2433

  .header__inline-menu {
    display: block;
    justify-self: end;
  }
  .header__inline-menu-secondary {
    display: block;
  }
  .header--top-center .header__inline-menu {
    justify-self: center;
  }
  .header--top-center .header__inline-menu-secondary {
    justify-self: center;
  }

Assign the right menu in settings and that should be it. Note this is a rough draft of the steps and the code might not look like that

but it could guide you in the right direction. So you should get something like this

1 Like