x

How do I make my logo bigger?

Hi all,

I am having issues making my logo bigger on the homepage, does anyone know how to do this?


Thanks!

6,220 Views
Message 1 of 8
Report
1 Best Answer

Best Answer

@MarineB24 

OK, try this. Under STYLES in the Code Editor there's a file calle nav.less. Open it and at or about line 60 (just before /* Nav */) you'll find the following code snippet:

img {

    overflow: hidden;

    max-width: 40px;

    max-height: 20px;

The figures in bold are the ones you need to change (yours will probably be different to those shown). Try increasing the width to say, 250px and the height to 150px. Don't change anything else! Save and go back your editor. You should be able to drag the logo to a larger size via the lower-right corner. You may have to play around with the drag size and/or with these figures if you want an even larger logo.

Three things to bear in mind: First, if your uploaded logo is small (in px and bytes) it will rapidly lose image quality when you expand it. You may have to upload a higher resolution logo if that's the case. Ideally your uploaded logo should be the same size as it displays. PNG files are often better for large logos, IME, but a good quality .jpg is OK. Second, your theme isn't best suited for a large logo because your logo/nav section is always visible when scrolling, so the expanded upper space may impinge on the page contents. If so, you may need to add a spacer element at the top of your webpage content to compensate for this. Third, larger logos only really work on larger monitors such as desktops and laptops. Responsive themes (like yours) will usually shrink the logo for mobile size screens in favour of displaying the page content.

Hope this helps, Gary

View Best Answer >

6,188 Views
Message 9 of 8
Report
7 REPLIES 7

@MarineB24 

This depends on the theme you're using. Some themes do allow larger logos (e.g. Clean Lines, Cento?) other's don't. If you want to change the logo size on default small logo themes you'll have to make changes to the code. So you'll need to tell us the theme you're using to get help (and preferably the website URL too).

Gary

6,213 Views
Message 9 of 8
Report

Hi Gary 

Thanks. https://www.blewettlab.com/ is the URL and the theme is personal- birds eye2.

You'd think it would be easier than importing code, not everyone would know how to do that.

Thank you!

6,205 Views
Message 9 of 8
Report

Best Answer

@MarineB24 

OK, try this. Under STYLES in the Code Editor there's a file calle nav.less. Open it and at or about line 60 (just before /* Nav */) you'll find the following code snippet:

img {

    overflow: hidden;

    max-width: 40px;

    max-height: 20px;

The figures in bold are the ones you need to change (yours will probably be different to those shown). Try increasing the width to say, 250px and the height to 150px. Don't change anything else! Save and go back your editor. You should be able to drag the logo to a larger size via the lower-right corner. You may have to play around with the drag size and/or with these figures if you want an even larger logo.

Three things to bear in mind: First, if your uploaded logo is small (in px and bytes) it will rapidly lose image quality when you expand it. You may have to upload a higher resolution logo if that's the case. Ideally your uploaded logo should be the same size as it displays. PNG files are often better for large logos, IME, but a good quality .jpg is OK. Second, your theme isn't best suited for a large logo because your logo/nav section is always visible when scrolling, so the expanded upper space may impinge on the page contents. If so, you may need to add a spacer element at the top of your webpage content to compensate for this. Third, larger logos only really work on larger monitors such as desktops and laptops. Responsive themes (like yours) will usually shrink the logo for mobile size screens in favour of displaying the page content.

Hope this helps, Gary

6,189 Views
Message 9 of 8
Report

That helped! Thank you Gary!

6,175 Views
Message 9 of 8
Report

Can you explain me how I can do the same, make the logo bigger, in the theme TRAVELLIN - dusk 2? 

Website is www.victor-y-horsesnew.weebly.com 

Thank you

6,068 Views
Message 9 of 8
Report

Can anyone help me?
Which code and where should I enter it so that I can make my logo bigger? I use the Travellin - dusk 2 theme. And my website is currently www.victor-y-horsesnew.weebly.com
Thanks

6,070 Views
Message 9 of 8
Report

Hello,

I am trying to do the same, however, "img" does not show up in navigation.less in the Travellin - Dusk 2 theme.  Our logo is teeny-tiny when I upload it.  The original is 1500x1500, but I see it's being limited to 40x40.  I'd like to increase the logo  to 80x80

3,514 Views
Message 9 of 8
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.