25 thoughts on “Changing the logo size in OpenCart”

  1. Hiya I have altered this code and it does not alter the view. (The code works but it will not stay changed.

    If I edit it a code editor (firebug) in firefox it changes but a reload or refresh changes it back again.

    Regards Andy T

    1. Hey Andy,

      The code you enter in Firefox or Chrome only allows you to see how it would look if applied certain styles. The actual code is in /catalog/view/theme/your_theme/stylesheet/stylesheet.css

  2. Hi,

    Great post. I had this problem, too. I made a custom logo but when I uploaded it it overlapped with the top menu so I went on an adjusted the logo every time. This is a great solution …

    Since I am a new to coding, where should I insert the code? I mean I found the file and opened it (via cpanel) but where should I put it?

    Thanks a lot,

    Y.

    1. Hi!

      I’m glad that the post helped you.

      You can simply insert the code at the end of the file. It should work fine.

  3. Hi Gergana,
    I did what you wrote above (put code at the end of file) but nothing happen.
    Logo is to small or to big if i change size.
    I saved changes in code in cPanel code editor.
    Where could be a problem, please help. How could i put logo which should be big simillar Like Opencart logo.

  4. @Kees, @EdenW, @David

    Glad it works for you guys! :)

    @Roberto
    As far as my experience goes the cPanel editor is not very reliable to modify code. So, this might be a reason why it didn’t work for you. Try to download the file and modify it in a text editor on your computer. Sublime text is awesome, but, if you don’t want to download it, you can use Notepad or TextEdit, depending on which one you have installed. Save the file on your computer and upload it back to the server.

    Hope this is helpful!

  5. The code worked great to make the logo stay put, but now no matter what I do
    the logo is too small. How do I fix this. I even installed the logo in a large format.
    Please help. Thank you

  6. @Jason

    You can try this code instead:

    #header #logo img {
    width: auto;
    max-height: 50%;
    height: 50%;
    }

    #header #logo {
    height: 100%;
    }

    Change height: 50%; to height: 70%; to make the logo larger.

    1. My website is http://www.gearheadsoutdoors.com Thank you for the reply
      however that new code helped but would still like to have it larger without encroaching on other links when clicked. For examply when I click the about us the logo will block out some of the about us. is the a way to keep that from happening like push the rest of the window below logo? Thank you for your help

  7. Never mind figured it out. If the logo is overlapping the header, ie. everything underneath it you have to change header height. Play with height:– until you have the right whatever size you need.

    #header {
    height: 90px;
    margin-bottom: 7px;
    padding-bottom: 4px;
    position: relative;
    z-index: 99;
    }

    1. I dont have any reference in the new version 2.0 Open cart to #header {
      height: 90px;
      margin-bottom: 7px;
      padding-bottom: 4px;
      position: relative;
      z-index: 99;
      }

      (In fact no reference to “header” at all)
      does this code still work? in version 2.0

      It no longer work for me :(

      Regards Andy T

  8. Apparently the CCS codes have been chnaged so version 2.0 will not work with the old code.

    The new CSS class(es) is what you need to make this adjustment, once you have that you can add any code you’d like.

    Code: Select all

    #logo {
    /* CSS CODE HERE */
    }

    #logo img {
    /* CSS CODE HERE */
    }

    Does anyone understand what is needed??

    1. Hey Andy,

      Thanks for noting. I’ll update the article. In OpenCart 2.0 there is no #header div, so that’s why the above code wasn’t working.

      Try this:

      #logo img{
         width: auto;
         max-height: 80%; 
         height: 30%;
      }
      
      #logo {
         height: 100%;
      }
      
  9. I’ve uploaded a logo but it looks too small. Earlier it was too big that it was covering entire front banner but after using your resizing code it went too small. Kindly help in this case. My version is 1.5.6.4

    1. Hi Tushar,

      I just looked at your website. These are the proportions of the logo. You’ll have to either stretch it or make it appear outside of the logo area to make it bigger. I’d recommend to contact your designer and ask them to make it something that can be resized down to 100-120px. Then you’ll be able to make it bigger.

Leave a Reply

Your email address will not be published. Required fields are marked *