Shopify themes, liquid, logos, and UX
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!
Hello @Distinctz
can you share store URL?
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.
URL is https://distinctz.com/
thanks for replying in which file can you edit the header?
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
thanks for helping me when i try to put the code for the second menu in i get a error:
how can i fix this error thanks for your help!
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.
hello thanks for helping me i cant find the "blocks": [ { "type": "@app" } ] section is this still in the header.liquid file?
Well if you do not have it,great, disregard that whole part 🙂
Try to just replace code for secondary_menu.
i did that but still got the error?
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.
im going to send you the header.liquid in private message
i have now removed it what should i do next?
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024