How to center the header navigation menu text on Empire theme?

[pnsempire]

I want to center the text on the header menu, website is  
https://poolcareshop.com.au/ 

Same to the example below

[Dan-From-Ryviu]

Hi @pnsempire 

You can do that by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

@media (min-width: 990px) {
body .site-navigation { justify-content: center; }
}

[pnsempire]

What do i replace it with?

[Dan-From-Ryviu]

Just add code to Custom CSS in Online Store > Themes > Customize > Theme settings.

[pnsempire]

there are many sections though? 

Can you please advise where I can place the code? Do I go to "theme.css" ?

[Dan-From-Ryviu]

You can add to theme.css at very bottom of file. 

[pnsempire]

I can't see "custom css" also do i place it at the bottom of the file? do i replace anything?

[Dan-From-Ryviu]

Custom CSS can be seen in Online Store > Themes > Customize > Theme settings 

[LizHoang]

Hi @pnsempire, thanks for your sharing.

To address the issue, please help me go to your Online store -> Theme -> Customize -> Theme settings -> Custom CSS and insert the following custom CSS code:

nav.site-navigation {
    justify-content: center;
}

I hope my solution is helpful to you.

Liz

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App

Hi @pnsempire   Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>
  @media screen and (min-width: 1024px){
    .site-navigation{
       display: flex !important;
       justify-content: center !important;
     }
  }
</style>

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly

[BSSCommerce-B2B]

@pnsempire,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head>

<style>
@media (min-width: 1024px) {
    nav.site-navigation {
      justify-content: center!important;
    }
}
</style>

Result:

If it helps you, please like and mark it as the solution.

Best Regards 😊

[DaisyVo]

Hi @pnsempire 

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (min-width: 769px){
nav.site-navigation {
    justify-content: center !important;
}
}

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[websensepro]

Hi @pnsempire 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(min-width:1024px){
.site-navigation {
    display: flex;
    justify-content: center !important;
}
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!