Make mobile logo centered

Store Design
, ,

Topic summary

A user seeks help centering their mobile logo, as their theme lacks this built-in option.

Three solutions provided:

  1. Dan-From-Ryviu’s approach: Add CSS to Custom CSS section via Online Store > Themes > Customize > Theme settings, targeting the header with grid template columns and space-between justification (code snippet appears corrupted in original post).

  2. Rahul_dhiman’s method: Navigate to Online Store > Themes > Actions > Edit Code > base.css/theme.css and add CSS targeting .header-logo with margin: auto !important and align-content: center !important.

  3. Made4uo-Ribe’s solution: Edit main.css (or base.css/style.css/theme.css) in the Asset folder, adding a media query for screens max-width 749px that uses display: grid, grid-template-columns, and text alignment properties.

All responses include code snippets and request marking the helpful answer as the solution. The discussion remains open with no confirmation of which solution worked.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hi,
hope someone can help.
I would like to make the mobile logo centered, for some reason the theme doesn’t have this option:(

Thank you :slightly_smiling_face:

https://bbe8ai0423i0sckp-79419244874.shopifypreview.com

1 Like
2

Hi @Daniel19901

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

@media (max-width: 749px) {
.header__logo { justify-content: space-between; }
.header {grid-template-columns: 2fr auto 1fr !important; }
}
1 Like
3

Hello @Daniel19901

Go to online store ---------> themes --------------> actions ------> edit code------->base.css/theme.css
add this code at the end of the file.

.header-logo {
color: var(--color-normal-text);
margin: auto !important;
align-content: center !important;
}

and the result will be ( on all screens)

5.png
5.png780×832 279 KB

4.png
4.png586×832 179 KB

3.png
3.png422×832 202 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks

4

Hi @Daniel19901

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
@media only screen and (max-width: 749px){
.header__logo.d-flex.middle-xs {
    display: grid;
    grid-template-columns: auto 1fr;
}
sht-menu-drwer-opner.d-block.header__icons.d-none-lg {
    width: fit-content;
}
.header-logo {
    text-align: center;
}
.header__icons.header__icons--right.d-flex.fw-wrap.end-xs.middle-xs.ml-12 {
    margin-left: 0px;
}
}
  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!