Shopify themes, liquid, logos, and UX
Hello my site below:
https://nolocoffee.myshopify.com/
https://7ael6uh5jfzbzuqy-59493777565.shopifypreview.com
I would like to have my logo centred in the header and keep the menu items on the left. Is there some simple code i could use to make this happen?
Thank you 🙂
Solved! Go to the solution
This is an accepted solution.
Try the following:
@media (min-width: 990px){
.header{
display: flex;
}
.header .header__inline-menu{
display: none;
}
/* logo */
.header > *:nth-child(2){
order: 2;
width: 100%;
/* margin: 0 auto; */
}
.header > *:nth-child(2) img{
max-width: 120px;
margin: 0 auto;
display: block;
}
.header__heading-link{
display: table;
margin: 0 auto;
}
.header > *:nth-child(4){
order: 3;
}
header-drawer{
display: block !important;
}
}
Unfortunately, there is no simple solution for this. It would need header customization.
@oliverjames
Have you taken a look at this solution yet? I believe this is what you are trying to achieve. Let me know if it works for you.
Kind regards,
Diego
Hi there! Thanks for that code.
It works great on the homepage ... however as soon as you go to any other page on the site the logo becomes massive and takes up the entire screen. screenshots attached
@oliverjames
I have updated the code in the post, please delete the code you added previously and try the new one.
Kind regards,
Diego
Now it works great on the other pages but it's left justified on the homepage. Weird how it is changing.
This is an accepted solution.
Try the following:
@media (min-width: 990px){
.header{
display: flex;
}
.header .header__inline-menu{
display: none;
}
/* logo */
.header > *:nth-child(2){
order: 2;
width: 100%;
/* margin: 0 auto; */
}
.header > *:nth-child(2) img{
max-width: 120px;
margin: 0 auto;
display: block;
}
.header__heading-link{
display: table;
margin: 0 auto;
}
.header > *:nth-child(4){
order: 3;
}
header-drawer{
display: block !important;
}
}
Like a charm! Thank you for your persistence. Legend
Hi Diego,
Thank you so much for this! It worked.
But i have 1 question, what setting do I change if I don't want the hamburger menu?
Warm regards
Try this? It is close, I am not sure the logo stays centered without the hamburger menu, though.
@media (min-width: 990px){
.header{
display: flex;
}
.header .header__inline-menu{
display: block;
}
/* logo */
.header > *:nth-child(2){
order: 2;
width: 100%;
/* margin: 0 auto; */
}
.header > *:nth-child(2) img{
max-width: 120px;
margin: 0 auto;
display: block;
}
.header__heading-link{
display: table;
margin: 0 auto;
}
.header > *:nth-child(4){
order: 3;
}
header-drawer{
display: none !important;
}
}
yes this works, but indeed, the logo is not centered.
Hi @diego_ezfy
I used this code on my site but it seems to be forcing a sticky header. Do you know why? Am I able to have it in this style but fixed?
When I attempt to put position: fixed in your code it always seems to clump the elements together and keep them sticky anyway 😕
Any help much appreciated
Site is:
lifeisgreatenterprises.myshopify.com
password: lifeisgreat
where this code needs to be placed.. thank you
Please add the code of your assets/base.css bottom of the file.
Thanks!
Hello,
I implemented the code, and the hamburger menu definitely works, but my logo isn't centered for some reason? I continuously play around with the logo positioning, but it still does not center the logo, as you can see here.
Would appreciate the help!!
Please share your store URL!
Thanks!
Hello! Thanks for getting back to me.
It is still under construction and is protected.
https://flashpointecandles.myshopify.com/
password is flashpointe.
Please add the following CSS code to your assets/base.css bottom of the file.
@media (min-width: 990px){
.header__heading-link {padding-left: 10rem !important;}
}
Thanks!
It worked!! Thanks so much! Appreciate it!
Hi again! Was now wondering how to make my logo bigger. Tried to resize it in customize settings, but it is now staying the same size.
Thanks!
Hi again @dmwwebartisan ! Was now wondering how to make my logo bigger. Tried to resize it in customize settings, but it is now staying the same size.
Thanks!
did they ever tell you how to fix that
Hello my friend, thank's for the code it helped me a lot. But I still have a problem with it, my logo is centered in home page but lefted in product page.. I don't get it.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024