How can I re-center my logo in the header after adding a button?

Store Design
1

Hi added an “Order” button to the header in my Narrative theme website. When I did, the centered logo moved left of center, presumably because it’s now considering the button as the right margin. How can I move it back to center without deleting the button? Thanks in advance for your advice.

1 Like
2

Hi @jeremysher ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

@jeremysher

Sorry for facing this issue, it’s my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. :blush:

Please share your site URL,
So I will check and provide a solution here.

4

Thank you. My store is https://missoula-cakes.myshopify.com/ and password is cake.

~Jeremy

5

Thank you very much. My store is https://missoula-cakes.myshopify.com/ and password is cake.

~Jeremy

6

Hi @jeremysher ,

To change you follow the instruction:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
@media (min-width: 480px) {
    nav.site-header__section.site-header__section--button {
        width: 160px;
    }

    .site-header__section.site-header__section--title {
        flex: 1;
    }
}

I hope it would help you.

7

Thank you, it worked! A warning message popped up though about scss being deprecated. This won’t have any impact on the solution, will it? https://shopify.dev/changelog/deprecating-sass-in-themes

1 Like
8

Hi @jeremysher ,

Currently, shopify recommends using css files. The current theme you are using is the scss file. So shopify only warns, but does not affect your code. ^^

Thanks