Make mobile logo centered

Store Design
, ,
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

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