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” ?

[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]

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

[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

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

Result:

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

Best Regards

[Dan-From-Ryviu]

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

[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!