Center Logo & Icons on Mobile Header

[LAL]

Hello, I had tried to enlarged and center the mobile logo and expand the icons to the sides for more room. This is the current code used under theme settings CSS. but as you can see it’s still not centered. can anyone help? ride theme. Thank you.

Domain: lovedandlavished.com

PW: test123

@media screen and (max-width: 768px){ header.header { padding-left: 10px !important; } summary.header__icon.header__icon–search > span { width: fit-content !important; } summary.header__icon.header__icon–search > span > span.svg-wrapper:nth-child(1) { width: unset !important; } summary.header__icon.header__icon–search { width: fit-content !important; } }

[TheUntechnickle]

Hey @LAL ,

I’ve reviewed your site and the current CSS you’re using to center your logo on mobile. I can see why you’re having trouble - the current approach needs a few adjustments to properly center the logo and space out the icons.

Here’s a CSS solution that will center your logo and give your icons more breathing room:

@media screen and (max-width: 768px) {
  /* Improve header spacing */
  header.header {
    padding: 10px 15px !important;
    justify-content: space-between !important;
  }
  
  /* Center the logo */
  .header__heading {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
  
  /* Make logo slightly larger */
  .header__heading-logo {
    max-width: 200px !important;
  }
  
  /* Ensure icons have proper spacing */
  .header__icons {
    margin-left: auto;
  }
  
  /* Adjust hamburger menu position */
  summary.header__icon--menu {
    margin-right: 10px;
  }
}

To implement this:

1. Go to your Shopify admin
2. Navigate to Online Store > Themes
3. Click “Actions” and then “Edit code”
4. Find your custom CSS file (or theme.css)
5. Add the code above, replacing your current mobile header CSS

Let me know if you need any help implementing this or if you’d like any adjustments to the sizing!

Best regards,

Shubham | Untechnickle

[LAL]

sorry that did not work well, it made logo smaller and it was not responsive to screen sizes , I had two different views in two phones, one the logo overlapped the search icon. see pics.

[Mustafa_Ali]

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
before the body ----->
if this code work please do not forget to like and mark it solution

[LAL]

thank you but sadly I didn’t get the same results you did, logo was still very small, only diff was just more spaces next to the hambuger.

[Rahul_dhiman]

Hello @LAL
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

@media screen and (max-width: 768px) {
.header {
padding: 0px !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Made4uo-Ribe]

Hi @LAL

Check this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (max-width: 768px) {
    header.header {
        padding-right: 10px !important;
    }
    .header__icons {
        padding-right: 0;
    }
}

• And Save.
• Result:
• 

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

[LAL]

hi it works and looks beautiful but now the screen moves from left to right, right to left and there’s a scroll bar at the bottom for side to side movement.

[LAL]

hi this one also works and looks beautiful but the same thing happens, the screen moves from left to right, right to left and there’s a scroll bar at the bottom for side to side movement.