Solved

How to add logo and store name in the header

D-Hageman
Tourist
5 0 1

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

Accepted Solutions (3)

Eric_K_
Shopify Expert
120 22 51

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.

 

View solution in original post

Eric_K_
Shopify Expert
120 22 51

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.

View solution in original post

Eric_K_
Shopify Expert
120 22 51

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. 

View solution in original post

Replies 13 (13)