Center Logo With Menu Links On Both Sides

[Distinctz]

Hoping someone could help me out with creating code that would allow our logo to be centered in the header with menu links on either side. I have attached photos of our current and desired layout.

Current layout:

Desired layout:

Thanks Everyone!

[niraj_patel]

Hello @Distinctz 
can you share store URL?

[Distinctz]

---

@niraj_patel wrote:

Hello @Distinctz 
can you share store URL?

---

distinctz.com

[Laza_Binaery]

Hi @Distinctz 

For that layout, you would need to add a second menu that will be on the right side of the logo. 

So find probably in the header, schema, and place where the main menu id set. Make a copy of the code and change the ID, you can name it right or secondary menu. Then check the code for the main menu, copy it paste it after the logo, and change the menu ID. It would probably need some CSS to align the left menu, logo, and right menu.

@niraj_patel 

URL is https://distinctz.com/

[Distinctz]

thanks for replying in which file can you edit the header?

[Laza_Binaery]

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 

<nav class="header__inline-menu accent-color....">
          <ul class="list-menu list-menu--inline" role="list">
            .....
          </ul>
 </nav>

Copy it and paste it after the logo code

<h1 class="header__heading">
   <a href="/" class="header__heading-link link link--text focus-inset">
     <img src="" cllass="header__heading-logo">
   </a>
</h1>

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

<nav class="header__inline-menu-secondary accent-color....">
          <ul class="list-menu list-menu--inline" role="list">
            .....
          </ul>
 </nav>

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

[Distinctz]

thanks  for helping me when i try to put the code for the second menu in i get a error: 

• Invalid schema: setting with id="secondary-menu" default is invalid     

how can i fix this error thanks for your help!

[Laza_Binaery]

Hi @Distinctz 

Sorry for the issues. Try this instead 

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

I tried and got also a different error, which looks like bug from here 

https://github.com/Shopify/cli/issues/1965

And temporal solution was to remove

    {
      "type": "@app"
    }

from

  "blocks": [
    {
      "type": "@app"
    }
  ]

But that way you lose a bit of functionality, you can not add some app section to the header if you have some app for that.

FRom your screenshot though, you should not have this problem.

[Distinctz]

hello thanks for helping me i cant find the  "blocks": [ { "type": "@app" } ] section is this still in the header.liquid file?

[Laza_Binaery]

Well if you do not have it,great, disregard that whole part 🙂

Try to just replace code for secondary_menu.

[Distinctz]

i did that but still got the error? 

[Laza_Binaery]

Hi @Distinctz 

Search in code  "id": "secondary_menu",  error suggests there are two same code blocks with that id.

Check it out or you can send me a private message with the whole header.liquid file.

[Distinctz]

im going to send you the header.liquid in private message

[Distinctz]

i have now removed it what should i do next?