Shopify themes, liquid, logos, and UX
I've tried added the code thats been given to others requesting for aligning the nav menu to the centre, instead it seems to push it more to the right.
I've tried adding it into the theme.liquid, and at the bottom of the base.
And i've also tried adding it into Custom CSS.
Anyone able to assist?
Solved! Go to the solution
This is an accepted solution.
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 990px) {
.header--middle-left {
grid-template-columns: auto !important;
}
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Hi @DigikyleAI
Do you mean center the logo and below the center logo is the nav? If it is would you mind sharing your store URL? Thanks!
This is an accepted solution.
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 990px) {
.header--middle-left {
grid-template-columns: auto !important;
}
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Thats worked, thank you.
But how can I also move the magnifying glass / icons in the top right to be in line with the menu and further from the edge?
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 990px) {
.header--middle-left {
grid-template-columns: 2fr auto !important;
margin-right: 0 !important;
padding-right: 0 !important;
}
.header-wrapper{
display: flex;
flex-direction: row-reverse;
border-bottom: 1px solid #fff !important;
}
.header__menu-item {
padding: 0 1.2rem 0 0 !important;
}
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Found the </body>
But it's done this instead
Thanks for the info, check this one.
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 screen and (min-width: 990px) {
.header__icons.header__icons--localization {
grid-column: 2/2;
grid-row: 1;
}
.desktop-localization-wrapper {
margin-left: unset;
}
.header-wrapper {
display: grid;
grid-template-columns: 2fr auto;
}
.header__heading, .header__heading-link {
justify-self: end;
}
header.header.header--middle-left.header--mobile-center.page-width {
margin: unset;
}
.header--middle-left {
grid-template-columns: 1fr auto !important;
}
}
@media screen and (max-width: 989px) {
.header-wrapper {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
header.header.header--middle-left {
margin: unset;
}
}
</style>
And save.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
It's done this?
This is the desired result I am trying to achieve.
That would have been the go to, but then the header dimensions change and I am trying to keep it at a certain size.
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