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

Solved
oliverjames
Excursionist
23 0 8

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

dmwwebartisan
Shopify Partner
9315 2156 2937

@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 | Bag is a cart drawer that maximizes your sales. View app →
0 Likes

@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

◦ Slideshow section not looking good or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
0 Likes
oliverjames
Excursionist
23 0 8

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

0 Likes

@oliverjames 

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

Kind regards,
Diego

 

◦ Slideshow section not looking good or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
0 Likes
oliverjames
Excursionist
23 0 8

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

0 Likes

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;
}
}
◦ Slideshow section not looking good or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
oliverjames
Excursionist
23 0 8

Like a charm! Thank you for your persistence. Legend

Jens_E
New Member
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

klackenb
Excursionist
23 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

 

0 Likes