Move main menu in center

Store Design
, , , , ,

Topic summary

A Shopify store owner wants to center-align their main navigation menu while keeping the logo left-aligned, as their theme lacks a built-in option for this layout.

Store Details:

Proposed Solutions:
Three different CSS-based approaches were offered:

  1. Basic centering approach: Add justify-content: space-between to the ul.header__links-list element in theme.css/base.css

  2. Desktop-specific solution: Modify the header row segment width to 73% with justify-content: space-between, applied only on screens 1024px and wider, using the Custom CSS section in Theme Settings

  3. Alternative desktop solution: Similar approach setting width to 80% with flexbox display properties, also targeting desktop viewports (1024px+)

All solutions involve editing CSS files through Shopify’s code editor and include media queries to ensure the changes only apply to desktop views. Visual examples were provided showing the expected result.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone, I would like to move my main menu to the center, but the theme doesn’t have an option for this. Currently, the menu is left-aligned along with the logo. I want to keep the logo on the left and center-align the main menu.

If anyone can provide the code to achieve this, I would greatly appreciate your help!

Thank you in advance!

Here is the store URL: studdedofficial.com

Password: 1234

2

Hello, @Digital_Imran

image.png
image.png777×263 187 KB

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
ul.header__links-list.fs-navigation-base {
    justify-content: space-between;
}

Thanks!

3

Hi @Digital_Imran

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

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

Here is the code for Step 3:

@media screen and (min-width: 1024px){
.header__row.header__row-desktop.lower .header__row-segment.header__row-segment-desktop.left.contains-nav {
    width: 73% !important;
    justify-content: space-between !important;
}
}

image (16).png
image (16).png1912×856 387 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

4

Hi @Digital_Imran

  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){
.header__row-segment.header__row-segment-desktop.left.contains-nav {
    width: 80% !important;
    display: flex;
    justify-content: space-between;
}
}

Result:

websensepro_0-1735213706663.png
websensepro_0-1735213706663.png958×454 500 KB

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!