Centre Logo Simple Theme

New Member
4 0 0

I would like to centre the logo in the simple theme.
How do i do this?

Is there a possibility i can get a picture behind the logo section?
How do i do this?

www.snowfree.store

Gracias.

0 Likes
Shopify Staff
Shopify Staff
259 2 42

Hi Tom, 

Lisa here from the Social Care Team. 

Follow these instructions to center the logo in the simple theme: 

1. Go to Themes > Customize Theme > Edit Code
2. Scroll down to assets, locate theme.scss.liquid 
3. On approximate line 2226 find: 

.site-header__site-name {
  display: block;
  margin: $gutter / 2;

( You can also press command f then enter in site-header to find this quicker ) 
4. At the end of this block add in: 

text-align: center;

Your final code will look like: 

5. Press Save. 

Now for your second question about adding an image behind the logo. This type of change can be tricky as it involves overlapping different elements that do not currently exist, and the image needs to be made mobile friendly. In order to accomplish this, you will need a more advanced customization of your theme's code. 

Since you're using a Shopify supported theme, you actually have 60 minutes of free design time on your account! I will reach out to you directly via email to confirm if you'd like me to apply to our theme support team to make this change for you!

If this is approved I will ask the team to share the edits and I will post here so the forum community can benefit from this change as well.

Let us know how the first part goes. 

- Lisa ?

Lisa | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
4 0 0

Hi there,

I did everything exactly how you told me.

Unfortunatly i diddn't work.

Help!

0 Likes
New Member
9 0 0

I tried it also and it DOESN'T work.

Could we please get some help on this?

0 Likes
New Member
9 0 0

As many people wanting to center the logo, why isn't in the header settings where to place it (left, center or right)?  Can't be that hard to do!

0 Likes
New Member
1 0 2

Hey guys, all you need to do is go to your theme.scss.liquid file, go down to #HeaderLogoWrapper and change the margin from "30px 0" to "auto" - you'll see what I mean in the screenshot provided. I learned this through trial and error and a bit of css properties googling :)

 

2 Likes
New Member
9 0 0

Izzy,

Thank you so much.  I tried everything I could find on Google and they all failed.

0 Likes
New Member
1 0 0

This is perfect! Thank you @Izzy2

0 Likes
New Member
6 0 0

Hi,

 

I want to move my logo to top which is parallele to search bar.

 

Who can help me please?

 

Thanks in advance.

0 Likes
New Member
3 0 0

Search in header.liquid for:

 

<header class="site-header grid medium-up--grid--table" role="banner">
<div class="grid__item small--text-center">

 

It should be:

<header class="site-header grid medium-up--grid--table" role="banner">
<div class="grid__item small--text-center medium-up--push-one-fifth">

 

You can play between medium-up--push-one-half to medium-up--push-eleven-twelfths

 

Greetings!

 

HTTP://WWW.CAMPERSFUERADESERIE.COM

WWW.CAMPERSFUERADESERIE.COM
0 Likes