How to add logo and store name in the header

Solved
Highlighted
Tourist
5 0 0

Hi community,

 

I have a problem in the venture theme. I have recently added a logo but after saving it, the store name disappears. I would like the logo on the left of the header. Next to it on the right I still want my store name as before. I can't edit this in the editor so i have to change the code somehow. Can anyone help me with this issue?

Schermafbeelding 2019-03-27 om 22.01.29.png

0 Likes
Highlighted
Shopify Expert
115 21 42

This is an accepted solution.

Option 1: 

 

The easiest way to do this without editing the source code would be to just put the text as part of the logo file. That's how most stores do it.

 

 

Option 2:

 

If you want to edit the theme, you need to find the header file where this class exists: site-header__logo-link

 

From there just add {{ shop.name }} right after the <img> tag. Add some CSS: 

 

 

.site-header__logo img {
  margin-right: 10px; // create some spacing next to logo
  display: inline-block; // make text appear on same line as logo
}

 

You may need to play around with the CSS a bit to make it fit right on mobile.  Hope that helps.

 

1 Like
Highlighted
Tourist
5 0 0

Hi Eric,

 

thanks for your help! it already looks better now. but there is still an issue with centering the shop name on mobile. do you you or anyone else know how to fix this?

Schermafbeelding 2019-03-27 om 23.44.36.png

0 Likes
Tourist
5 0 0

I have tried to edit the coding but without succes. hope someone knows the answer

0 Likes
Highlighted
Shopify Expert
115 21 42

This is an accepted solution.

You're hitting the max width of the logo container on mobile, so it's going to start wrapping the contents since there isn't enough room.

 

You'll need to add responsive code so it changes the font size in that area as it scales down. The code below should work, but you'll need to play around with the font-size attribute to make it fit.

 

@media only screen and (max-width: 749px) {
  .site-header__logo a {
    font-size: .7em;
  }
}

If you can't get it to look reasonable you'll need to modify the container, but that's heading into CSS grid stuff which to be honest is probably going to be a headache if you don't have at least intermediate web dev experience.

1 Like
Highlighted
Tourist
5 0 0

Hi Eric,

 

Thanks for you reply. I can figure out where to put the code. I'm in Sections->header.liquid, that is where i need to be right? I am trying to fit the code in lines 1-9 but it doesn't change a thing. I am not very good at understanding web dev.

Schermafbeelding 2019-03-28 om 08.35.36.png

0 Likes
Highlighted
Shopify Expert
115 21 42

This is an accepted solution.

You can add it there or also in one of the css files at the bottom.

 

Also your code syntax in your screenshot isn't correct. That first class needs to be closed with a }  and the @media line should have a { at the end. 

1 Like
Highlighted
Tourist
5 0 0

It worked, your a lifesaver Eric! thanks a lot

0 Likes
Highlighted
Shopify Expert
115 21 42

No problem. Glad it worked out for you.

1 Like
Highlighted
New Member
1 0 0

Hi Eric, I'm having a similar issue with my store. I want to add a symbol into my header to link to our contact us page. whats the best way to do this?

0 Likes