How to make mobile logo smaller & keep it centered.

Solved
Highlighted
Excursionist
37 0 2

Hey guys,

this should be easy, but it's not for me. 

my url is.  skateshop-tester.myshopify.com.

In the customize you can adjust the mobile logo header size, but when you do, it doesn't stay centered unless you make the logo big.  Im just looking to have the logo smaller and stay centered.

I'll attach a photo.  Picture on the left is what I have now.  On the right is what I am looking for, something like that.

Thanks!

example.png

0 Likes
Highlighted
Shopify Partner
581 92 133

Hello @patdonfro,

 

1. Go to Online Store->Theme->Edit code
2. Asset->stylesheet.scss

Search using ctrl+F

header.theme-header.stickynav #identity #logo {
justify-self: start;
}


change with

 

header.theme-header.stickynav #identity #logo {
justify-self: center;
}

Search

@media screen and (max-width: 740px)
#logo img {
max-width: 200px;
}

Change

@media screen and (max-width: 740px)
#logo img {
max-width: 100px;
}


Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

0 Likes
Highlighted
Astronaut
1075 173 211

This is an accepted solution.

Hello,

Here is how to fix it in 20 seconds:

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > stylesheet.scss OR stylesheet.css and paste this at the bottom of the file:

@media (max-width:767px){
#logo{
justify-self: center !important;
}

#logo img{
max-width: 130px !important;
}
}


You can change the value of 130px to anything you like. To make it bigger, for example, use 150px


Let me know if it works!

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Excursionist
37 0 2

Thanks @diego_ezfy  That solution worked for the header image!  Really appreciate it.

One other question if possible.  I am really looking for mobile grid spacing to be look like this.  Ours is the left, what I am looking for is the right.

The one issue I can't figure out it, if 1 item has a longer title it will throw the grid off. 

example2.jpg

 

0 Likes