Centering Menu and Logo and aligning cart

[Local_q]

Hi! I have the Local Theme and I have been trying to center the Logo and the menu but haven't had luck. I have tried with all the solutions already offered in this forum but none seemed to work with my theme.

My goal:     
|                     [logo]                        |

|                    [menu]           [cart]  |

What it currently looks like:

| [logo]                                  [cart]|

| [menu]                                          |

I also posted a Screen shot of what it currently looks like.

Thanks!

[Betterave-Nina]

Hi @Local_q. Welcome to Shopify Community!

It wouldn't be possible to style this with just CSS as the logo and buttons are located within one div and the menu is rendered with a sibling div. You can't change the DOM order with CSS.

This change would require editing your header.liquid file, most likely, or another corresponding .liquid file.

[Dan-From-Ryviu]

You can add this code to Custom CSS in of header to make your header like this 

.site-nav.style--classic {
    justify-content: center;
}

If you still want to make header look like your request then we will need to access theme and edit code to do that. 

[AnneLuo]

Hi, @Local_q 

Can you please share the store URL so I can better support you?

[tim · Accepted solution]

This code (can go to "Theme settings"=> "Custom CSS")

@media (min-width:1024px) {
  .header-actions--buttons {
    position: absolute;
    right: 0;
    max-width: 320px;
  }
  
  div#logo {
    padding: 0 320px;
    justify-content: center;
  }
  
  .header__top {
    display: flex;
    justify-content: center;
  }
  
  .site-nav.style--classic {
    justify-content: center;
  }
}

Will do this:

Moving Account/Cart buttons to the  menu line can not be done nicely with CSS only; also, as seen in the screenshot -- they would not fit, there is much more space for them in the logo line.