DAWN theme help: Possible to centre / center logo in header?

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 :slightly_smiling_face:

1 Like

@oliverjames

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.

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;
}
}
1 Like

Like a charm! Thank you for your persistence. Legend

1 Like

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

1 Like

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 :confused:

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;
}

}
1 Like

yes this works, but indeed, the logo is not centered.

where this code needs to be placed.. thank you

@Roheel

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!!

1 Like

@hillarybrown

Please share your store URL!

Thanks!

1 Like

Hello! Thanks for getting back to me.

It is still under construction and is protected.

https://flashpointecandles.myshopify.com/

password is flashpointe.

1 Like

@hillarybrown

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!

1 Like

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!