Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Center Logo With Menu Links On Both Sides

Center Logo With Menu Links On Both Sides

Distinctz
Explorer
83 0 6

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:

Screenshot 2024-01-29 16.05.46.png

Desired layout:

Screenshot 2024-01-29 16.05.35.png

Thanks Everyone!

Replies 13 (13)

niraj_patel
Shopify Partner
2378 514 507

Hello @Distinctz 
can you share store URL?

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Distinctz
Explorer
83 0 6

@niraj_patel wrote:

Hello @Distinctz 
can you share store URL?


distinctz.com

Laza_Binaery
Shopify Partner
191 42 62

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/

Kind regards
Laza
www.binaery.com
Distinctz
Explorer
83 0 6

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

Laza_Binaery
Shopify Partner
191 42 62

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

screenshot-distinctz.com-2024.01.30-17_12_22.png

Kind regards
Laza
www.binaery.com
Distinctz
Explorer
83 0 6

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!

 

Distinctz_0-1706704360580.png

 

Laza_Binaery
Shopify Partner
191 42 62

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.

 

Kind regards
Laza
www.binaery.com
Distinctz
Explorer
83 0 6

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

Laza_Binaery
Shopify Partner
191 42 62

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

Try to just replace code for secondary_menu.

Kind regards
Laza
www.binaery.com
Distinctz
Explorer
83 0 6

i did that but still got the error? 

Distinctz_0-1706772994897.png

 

Laza_Binaery
Shopify Partner
191 42 62

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.

Kind regards
Laza
www.binaery.com
Distinctz
Explorer
83 0 6

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

Distinctz
Explorer
83 0 6

i have now removed it what should i do next?