Solved

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

oliverjames
Excursionist
40 0 11

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 🙂

 

 

Screen Shot 2021-09-17 at 1.13.24 PM.png

Accepted Solution (1)
diego_ezfy
Shopify Partner
2935 562 883

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;
}
}
◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 22 (22)

dmwwebartisan
Shopify Partner
12280 2546 3694

@oliverjames 

Unfortunately, there is no simple solution for this. It would need header customization.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

diego_ezfy
Shopify Partner
2935 562 883

@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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

oliverjames
Excursionist
40 0 11

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

 

 

Screen Shot 2021-09-17 at 4.37.04 PM.pngScreen Shot 2021-09-17 at 4.37.10 PM.png

diego_ezfy
Shopify Partner
2935 562 883

@oliverjames 

I have updated the code in the post, please delete the code you added previously and try the new one.

Kind regards,
Diego

 

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

oliverjames
Excursionist
40 0 11

Now it works great on the other pages but it's left justified on the homepage. Weird how it is changing.

Screen Shot 2021-09-17 at 6.13.05 PM.pngScreen Shot 2021-09-17 at 6.13.00 PM.png

diego_ezfy
Shopify Partner
2935 562 883

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;
}
}
◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

oliverjames
Excursionist
40 0 11

Like a charm! Thank you for your persistence. Legend

Jens_E
Visitor
2 0 1

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

44degreesnorth
Visitor
1 0 1

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

}

 

Jens_E
Visitor
2 0 1

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

klackenb
Shopify Partner
26 0 5

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

 

Roheel
Tourist
5 0 1

where this code needs to be placed.. thank you

 

dmwwebartisan
Shopify Partner
12280 2546 3694

@Roheel 

Please add the code of your assets/base.css bottom of the file.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
hillarybrown
Tourist
5 0 2

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.

 

Screen Shot 2022-01-07 at 6.30.19 PM.png

Would appreciate the help!!

dmwwebartisan
Shopify Partner
12280 2546 3694

@hillarybrown 

Please share your store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
hillarybrown
Tourist
5 0 2

Hello! Thanks for getting back to me.

 

It is still under construction and is protected. 

 

https://flashpointecandles.myshopify.com/

 

password is flashpointe.

dmwwebartisan
Shopify Partner
12280 2546 3694

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

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
hillarybrown
Tourist
5 0 2

It worked!! Thanks so much! Appreciate it!

hillarybrown
Tourist
5 0 2

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!

hillarybrown
Tourist
5 0 2

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!

certifiedstarz
Excursionist
27 0 9

did they ever tell you how to fix that

 

jds20
Excursionist
14 0 2

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.