Hello my site below:
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 ![]()
Hello my site below:
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 ![]()
Unfortunately, there is no simple solution for this. It would need header customization.
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
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.
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
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
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.
where this code needs to be placed.. thank you
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!!
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!