0

(yes-I am new and sorry not advanced)

my logos are blurry (Magento 1.9.2), uploading a different file in backend (configuration/general options/custom logo) doesn't help. Especially sticky header (=small logo) on mobile looks really bad.

I assume the answer is to upload a logo twice the size of what I want to display and then downsize via styles.css, right?! in line 1170 of styles.css I find the following, but changing width:147px; height:42px; didn't do the trick. any ideas? thanks!!!

header#header .small_logo strong{
    position:absolute; 
    top:0; 
    left:-120px; 
    width:0; 
    height:0; 
    font-size:0; 
    line-height:0;
    text-indent:-999em; 
    overflow:hidden;
Improve this question
3
  • Can you post your website link, so we can take a look?
    – Bruno Monteiro
    Commented Jul 6, 2016 at 22:52
  • yafsparkle.com --the header logo on desktop is ok, the sticky header logo looks bad (=small logo), both on mobile are awful
    – TorstenAusBarmbek
    Commented Jul 7, 2016 at 0:50
  • I don't know if you changed, but it is not looking so bad here for me. The suggestion of using SVG (bellow) is good. You can also change you CSS above and use 'width: 100%' and 'heigth: auto' to have a responsive image.
    – Bruno Monteiro
    Commented Jul 7, 2016 at 16:44

1 Answer 1

Reset to default
0

You need to use svg logo format. svg image format you will able to scale image.

Follow below steps.

  1. Log in to the Magento Admin Panel as an administrator
  2. Navigate to System > Configuration > GENERAL > Design
  3. In the right pane, click Header to expand it
  4. In the Logo Image Src and Small Logo Image Src fields, enter the path of your primary logo in SVG format. For example: images/logo.svg
  5. In the top right corner of the page, click Save Config
  6. If prompted, flush the cache: Go to System > Configuration > Cache Management At the top of the page, click Flush Magento Cache
Improve this answer
2
  • sounds good, my template only allows for jpg,gif or png though. @Suryakant - I will have to go back to trying via css. Would you agree it must be in styles.css, above mentioned section, just change width to 100%?
    – TorstenAusBarmbek
    Commented Jul 8, 2016 at 0:26
  • Hello, Here is solution for you issue. You need to add css on logo image for example .logo-large img { width:100%; } .logo-small img { width:100%; } but make sure you need to add width logo parent html element. Note this is not mandatory to add media query if there required for media query you need to insert in media query for target view port for example @media screen and (max-width: 767) { .logo-large img { width:100%; } .logo-small img { width:100%; } }
    – Suryakant
    Commented Jul 8, 2016 at 5:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.