Center logo and menu items desktop view

isameloc
Visitor
2 0 0

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 

 

Captura de ecrã 2024-01-29, às 16.45.01.png

Replies 2 (2)

BSS-Commerce
Shopify Expert
3465 460 515

Hi @isameloc ,

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

Hope the result below is as you want: 

view - 2024-01-30T184630.177.png

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!

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

isameloc
Visitor
2 0 0

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: 

 

isameloc_1-1706699828553.png

 

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