Shopify themes, liquid, logos, and UX
I would like to center current Logo & position the Navigation bar at the very top (above logo) and search bar centered under logo In Charge Shopify Theme.
End result: Need to Have logo stand alone in the center of header with navigation menu above and search bar under the logo in the center
This is in Charge Shopify Theme
Solved! Go to the solution
This is an accepted solution.
Hi @NeginA
Sorry, I just read and forget to reply back. Do you mean like this?
Let see if my code will work,
From your Shopify admin dashboard, click on "Online Store" and then "Themes"
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.
<style>
@media only screen and (min-width: 768px){
header.header.dynamic-page-width.header--has-menu {
display: grid;
grid-template-areas:
'navigation'
'icons'
'heading';
grid-template-rows: auto auto auto;
grid-template-columns: 1fr;
gap: 20px;
padding-bottom: 20px;
}
}
@media (min-width: 768px), print
.list-menu--inline {
justify-content: center;
}
</style>
And save.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
This is an accepted solution.
I think you already change?
Just change the grid-templates area.
If my code help, Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
This is an accepted solution.
Yes, Ieve already centered thsi one maybe the code didnt listen. Add this code inside the style, before the </style> in the theme.liquid where you place the code.
ul.list-menu.list-menu--inline {
justify-content: center !important;
}
And save.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
This is an accepted solution.
The previous code, I give is nothing to do with the color. Cause it only for the alignment. Check this one. Im not sure what is cause of sudden changes but if you add some app or makes some change it would be possibly the cause.
From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.header__submenu.list-menu.list-menu--disclosure a:hover {
color: black !important;
}
.header__submenu.list-menu.list-menu--disclosure a {
color: white !important;
}
And Save.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hi @NeginA
Can I take a look? Would you mind to share your Store URL website? with password if its unpublish. Thanks!
I prefer not to share password 😞
Oh, It the password to enter your unpublish store. Not the admin.
This is an accepted solution.
Hi @NeginA
Sorry, I just read and forget to reply back. Do you mean like this?
Let see if my code will work,
From your Shopify admin dashboard, click on "Online Store" and then "Themes"
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.
<style>
@media only screen and (min-width: 768px){
header.header.dynamic-page-width.header--has-menu {
display: grid;
grid-template-areas:
'navigation'
'icons'
'heading';
grid-template-rows: auto auto auto;
grid-template-columns: 1fr;
gap: 20px;
padding-bottom: 20px;
}
}
@media (min-width: 768px), print
.list-menu--inline {
justify-content: center;
}
</style>
And save.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you so much @Made4uo-Ribe
All of it is exactly what I was looking for but wondering if I can get the logo as a stand alone at the very top center and everything else underneath? Sorry for the confusion
This is an accepted solution.
I think you already change?
Just change the grid-templates area.
If my code help, Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Is there a way to make the navigation menu centered?
This is an accepted solution.
Yes, Ieve already centered thsi one maybe the code didnt listen. Add this code inside the style, before the </style> in the theme.liquid where you place the code.
ul.list-menu.list-menu--inline {
justify-content: center !important;
}
And save.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you for the coffee tip, so nice to recieve coffee while its raining. 😊
oh I'm so happy to hear! Also, I noticed when I added the code...on the homepage only - the navigation menu drop down categories are white out...you can't see the text? It's not in the customization/editor part because it works fine on other pages... can you help with this?
This is an accepted solution.
The previous code, I give is nothing to do with the color. Cause it only for the alignment. Check this one. Im not sure what is cause of sudden changes but if you add some app or makes some change it would be possibly the cause.
From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.header__submenu.list-menu.list-menu--disclosure a:hover {
color: black !important;
}
.header__submenu.list-menu.list-menu--disclosure a {
color: white !important;
}
And Save.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you so much! Last, can you provide a code to get the hamburger menu left aligned only on mobile, thank you! tip coming your way 🙂
Oh, Sorry I didnt ask about the mobile alignment. Please, add this code to the previous code I give paste it before the </style> tag.
@media only screen and (max-width: 768px){
header.header.dynamic-page-width.header--has-menu {
display: grid;
grid-template-areas:
'heading'
'navigation'
'icons';
grid-template-rows: auto auto auto;
grid-template-columns: 1fr;
}
}
And save.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
It brought it under the logo but to the left... I am pasting in theme.liquid
Can you look again please?
Hi!
in reference to this...I didn't catch this before but when I hover down the submenu...the headers disappear
Can you help me with this?
Hi!
in reference to this...I didn't catch this before but when I hover down the submenu...the headers disappear
Can you help me with this?
We 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, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024