Ella Theme 6.4.1 - Center Header Logo and Navigation

[onthefly]

Hi, I’d like to center the logo and navigation for my site. URL: https://theregattacollection.com/

Please help!

[Moeed]

Hey @onthefly

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[fadi_yousif]

Styling changes should be done in CSS files, so avoid modifying the theme.liquid file. The easiest and most reliable solution for centering elements is to use CSS Flexbox. Head to assets → base.css and add the following code to the end of the file:

.header .container,
nav.header__inline-menu {
    display: flex;
    justify-content: center;
}

If it doesn’t work, try this:

.header .container,
nav.header__inline-menu {
    display: flex !important;
    justify-content: center !important;
}

Here’s the result:

[hilyahwear]

Hey @fadi_yousif

I followed the instructions but it is still not working for me. Any other solution?

[fadi_yousif]

Your theme’s code may be different. What’s your store URL?

[hilyahwear]

https://hilyahwear.com/

[fadi_yousif]

Your header’s layout is different. I’ve never used the Ella theme, but you might be able to center the logo and navigation through the theme editor. I was able to do this without changing the code in Dawn by clicking the Header section and setting Desktop logo position to Top center


[hilyahwear]

I see.

Unfortunately, I don’t have that option. I’ll share a screenshot.

[fadi_yousif]

Okay, in that case it would need to be custom coded.