Logo left and menu in the middle of the header with Dawn theme

Store Design
, , ,
1

Hello, I wish I could have my menu in the middle of the header but still, my logo on the very left.

Would anyone have a code for this to work ?

My site is being created, here is the link and password :

https://ancestraatheletes.com / ecrawl

Thank you !

Capture d’écran 2024-08-29 à 11.18.00.png
Capture d’écran 2024-08-29 à 11.18.00.png1440×218 14.5 KB

2

You can achieve this by going to Online Store, 3 dots, Edit Code. Then open base.css and look for .header–middle-left and replace the grid-template-columns to read 1fr 1fr 1fr as below. This will space the Logo, Menu and Basket sections evenly.

.header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2rem;
  }

Next you need to find .header__inline-menu inside the @media query and changing the display to flex and adding justify-content: center. This will ensure the menu is centered within its grid column.

@media screen and (min-width: 990px) {
  .header__inline-menu {
    display: flex;
    justify-content: center
  }

Hope this helps

Simon

3

Hello, thank you for your response.

It worked perfectly.