How can I center my logo and menu items on desktop view?

[isameloc]

Hi there!

I'm really struggling on centering my logo and evenly spacing the menu items on my desktop view.

Can anyone please help?

Thank you so much!!

www.sportsonlyne.com

pass: chaort 

[BSS-Commerce]

Hi @isameloc ,

As your requirement, you can try my solution by fixing CSS in your theme:

Hope the result below is as you want: 

In your menu header there are 4 classes: 

- header__inline-menu-left

- header__inline-menu-right

- header__heading (logo)

- header__icons

I added the order property in the correct ascending order from 0 -> 3 to realign the position of the classes, and also added some other css properties to make it more well-proportioned. 

You can do this in admin.shopify: 

Sale channels => Online store => Theme => Edit code. Search base.css and insert the css at the end of the file:

.header.header--middle-center.header--mobile-center.page-width.header--has-menu {
    display: flex;
    justify-content: space-between;
    justify-items: center;
}

.header__inline-menu.header__inline-menu-left {
    order: 0;
}

.header__heading {
    display: block;
    margin: 0 auto;
    order: 1;
}

.header__inline-menu.header__inline-menu-right {
    order: 2;
}

.header__icons {
    order: 3;
}

Hope it helps!

[isameloc]

Hi @BBS-Commerce, 

Thank you so much for your help. 

Your solution is closer to what I envisioned but I need it to be more like this: 

- the logo should be centered with the page (not the male model picture)

- The menu items more spaced between them and evenly distributed on the box.

Can you please help?

Thank you so much!