How can I center the header menu in Dawn theme on desktop view?

[jecbon]

hello, i would like to center the header menu to have it in the center of the page. only visible on computer and the logo can stay on the left . 

DAWN THEME.

[Zworthkey · Accepted solution]

hii, @jecbon 
Paste this code on top of the base.css file.

@media screen and (min-width: 990px){
nav.header__inline-menu {
    position: relative !important;
    left: 360px !important;
}
}

Thank You.

[dmwwebartisan]

@jecbon 

please try this code 1. Go to Online Store->Theme->Edit code 2. Asset->/base.css ->paste below code at the bottom of the file. 

@media screen and (min-width: 990px){
.header--middle-left .header__inline-menu { margin: 0 auto !important;}
}

Thanks!

[jecbon]

the solution should be standard across dawn theme im not sure if i need to share link . 

[dmwwebartisan]

@jecbon 

please try this code 1. Go to Online Store->Theme->Edit code 2. Asset->/base.css ->paste below code at the bottom of the file. 

@media screen and (min-width: 990px){
.header--middle-left .header__inline-menu { margin: 0 auto !important;}
}

[jecbon]

doesnt work sir. 

[Zworthkey · Accepted solution]

hii, @jecbon 
Paste this code on top of the base.css file.

@media screen and (min-width: 990px){
nav.header__inline-menu {
    position: relative !important;
    left: 360px !important;
}
}

Thank You.

[jecbon]

Thank you Zworth. 

[Zworthkey]

@jecbon 
Thanks for your Question, kindly like our solution i helpful.

[jecbon]

????

[Zworthkey · Accepted solution]

@jecbonremove the previous code which I have given you for center navigation and paste this code on top of the base.css file.

@media screen and (min-width: 990px){
nav.header__inline-menu {
    position: relative!important;
    left: 420px !important;
}
}

Thank You.

[jecbon]

Hi again, same issue it is not centering even when im full screen on desktop. previously it was centered ok when i had the screen half size but when i go full screen it becomes off centered. Now with the new solution, its off centered on both half window screen and full screen. 

[p1simgear]

Hi there I have the same issue with this code - it doesnt auto center when changing the screen size:

@media screen and (min-width: 990px){
nav.header__inline-menu {
position: relative!important;
left: 420px !important;
}
}

Is there a way to replace the 420px element with an auto center function?

thanks!

[Hiltonfrost]

Has anyone come up with a solution for this? I am needing my menu centered no matter the screen size

[dmwwebartisan]

@Hiltonfrost 

My pleasure to help you.
Welcome to the Shopify community!
Please share your store URL!
I will check out the issue and provide the correct solution to you!

Thanks!

[p1simgear]

Thankd @dmwwebartisan , this is same issue for me. My details:

p1simgear.com.au

pw:  P1test%

thanks!

[dmwwebartisan]

@p1simgear 

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

@media (min-width: 990px) {
  .header .header__inline-menu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .header .list-menu--inline {
    display: flex;
    justify-content: center;
  }
}

Thanks!

[p1simgear]

Awesome, worked perfectly. thanks!

[jecbon]

Hello, this does not center the header menu on the desktop. it is skwed to the left. 

[greencloudnine]

It also worked for me, and actually i just added it to the custom css section in the theme. Thx!