Center logo and move menu bar to the left

Store Design
1

Hello!

I have the debut theme and I’m trying to get my logo center on the mobile. I’ve tried a few codes from discussions but it hasn’t worked. I’m also trying to move the menu bar (three lines) to the left instead of the right. What code will do that?
thank you!

website: tinybynature.co

2

Hi @Tinybynature ,

Sorry to hear that. Here is the code you can try.

  1. Go to Online store > Themes > Actions > Edit code.

  2. Open the theme.css file or index.css and add the code below.

@media only screen and (max-width: 750px) {
.site-header__logo-image {
    transform: translateX(-25%) !important;
    margin-left: 50% !important;
}
}

If it works, please select as a solution. Thank you

3

Thank you!
I tried it but it didn’t do anything to the logo sadly.

4

Hi @Tinybynature ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
@media (max-width: 749px) {
    .site-header .site-header__mobile-nav > div,
    .site-header .site-header__mobile-nav .site-header__icons-wrapper {
        position: static !important;
    }
    .site-header .site-header__mobile-nav .site-header__menu {
        position: absolute !important;
        left: 0 !important;
    }
    .site-header .site-header__mobile-nav > .grid__item:first-child {
        display: flex !important;
        justify-content: center !important;
        padding-left: 80px !important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like