Center the menu/nav on desktop on Dawn Theme

Store Design
1

I would like to center the menu/nav on desktop only in the Dawn theme.

Can anyone help with code for this.

my url is preacha.com

thank you

2

Add this code to bottom of base.css

.header.header--middle-left.page-width.header--has-menu {
  text-align: center;
}

Result:

2021-09-03 21_55_24.png
2021-09-03 21_55_24.png1477Ă—184 6.17 KB

3

looks great on desktop but Tablet the menu has changed as well.

4

You could replace the previous code with the one featuring a media query:

@media screen and (min-width: 990px){
.header{
  text-align: center;
} 
}

For a screen less than 990px (including IPAD), the menu defaults to the hamburger menu.

2021-09-03 22_38_37.png
2021-09-03 22_38_37.png1048Ă—280 5.92 KB

5

Hello I’m trying to center my main menu navigation.

My website is fosterfinds.com

I added the code below to my base.css:

.header.header–middle-left.page-width.header–has-menu {
text-align: center;
}

But it didn’t work for me.

Thanks a lot!

6

@fosterfinds Didn’t work for me either… Did you ever find a solution?

7

Hi

this is how i did it. simply changed the first grid area for the header from auto to 1fr.

add this to the end of your base.css

@media screen and (min-width: 990px) {
/* center header navigation on desktop, change logo area from auto to 1fr */
.header–middle-left {
grid-template-columns: 1fr auto 1fr;
}
}

8

This code doesn’t work

9

Hi

Just to expand on the above, you can move the menu across to the right to join the icons with the following

grid-template-columns: 1fr auto auto;

@media screen and (min-width: 990px) {
.header–middle-left {
grid-template-columns: 1fr auto auto;
}
}

cheers

Darren

10

Hi

Simply add the following to the end of your base.css file

@media screen and (min-width: 990px) {
.header–middle-left {
grid-template-columns: auto 1fr auto;
}
}

.header__inline-menu {
justify-self: center; /* start | center | end */
}

You can set the menu postion to left, center or right by changing justify-self to start, center, or end respectively

Darren