Maximum logo size too small in customiser

oliverelisha · Member · Jul 27, 2016 at 9:44 am
Copy link

Add topic to favorites
Hello there, I’m trying to add a logo to my site but it’s too big to put in the customiser and I have no idea how to use the CSS. Could you please help?
I would like my logo to be the same size as the site title if possible.
My website is http://www.bilingualminds.com

Thanks in advance!!

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Jul 27, 2016 at 12:00 pm
Copy link
It looks like you don’t want a logo, instead you want to replace the site title text with an image. If that’s the case get rid of the logo completely in your customiser then let me know and I’ll see if I can suggest a CSS solution that will work with your theme.
oliverelisha · Member · Jul 27, 2016 at 12:23 pm
Copy link
Yes exactly. I’ll remove the site title once I have the image/logo up.
Okay, I’ve removed the logo. Thanks Hallluke
hallluke · Member · Jul 27, 2016 at 12:33 pm
Copy link
Try pasting this code into the CSS section of the customiser:
```
#masthead .site-title a {
  background: url("https://bilingualmindsdotcom.files.wordpress.com/2016/07/biling_logo1.png") no-repeat;
  display: block;
  height: 80px;
  width: 300px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
```
It looks OK on most device screen sizes although you might find the navigation menu splits onto 2 lines on large tablets and the menu button hovers slightly over the image on smaller smartphones.

The one thing I would suggest if possible is recreating the image file if you have a better quality source version to work from. It comes across a little blurry on hi-res/retina screens.
oliverelisha · Member · Jul 30, 2016 at 2:47 pm
Copy link
That’s good enough for now. Thank you very much!!
quinndevlinandthebridgestreetkings · Member · Jul 30, 2016 at 6:41 pm
Copy link
Hey, I’m just starting out building my wordpress website. I am having a similar issue with wanting to make the logo larger and that code didn’t work when I copied it into my CSS editor with my own source url. My website is https://quinndevlinandthebsks.com/

Any help would be much appreciated!
hallluke · Member · Jul 30, 2016 at 7:45 pm
Copy link
CSS differs depending on your theme, so what works in one is unlikely to work in another.

Here’s some code that should work for you:
```
#masthead .custom-logo-link {
  background: url("https://quinndevlinandthebridgestreetkingsblog.files.wordpress.com/2016/07/cropped-logo.png") no-repeat;
  background-size: contain;
  display: block;
  height: 150px;
  width: 150px;
}

#masthead .custom-logo {
  display: none;
}
```
You can change the size to suit your needs. You should also re-upload the image at the size you want it because at the moment the original image is pretty huge and you don’t want to use up mobile visitors data or make your site load too slowly, especially when the image is resized to be much smaller.

Also, next time you have a question could you please start a new topic. Doing that helps keep the forums organised and stops other people from getting notifications about comments that are unrelated to their original issue.
charliehorsefurniture · Member · Jul 30, 2016 at 9:10 pm
Copy link
Hi, I’m just starting out building my wordpress website and am having a similar issue with wanting to make the logo image larger. My website is charliehorsefurniture.co.nz

Thanking you in advance.
thesacredpath · Member · Aug 1, 2016 at 7:20 pm
Copy link
Hi @charliehorsefurniture, the site linked to your username, and to your user account appear to by not hosted here at WordPress.com. Can you give us a link to the site you are talking about please?
charliehorsefurniture · Member · Aug 14, 2016 at 5:44 am
Copy link
Hi. Hosting on its way, just waiting for existing provider to point DNS settings to wordpress (apparently its takes 72hours, but that was from 9 Aug!!).
Does this work? https://wordpress.com/stats/insights/charliehorsefurniture.co.nz
thesacredpath · Member · Aug 16, 2016 at 6:02 pm
Copy link
@charliehorsefurniture.co.nz, it still appears like your domain name is pointing to the other web host. I would suggest contacting the registrar again and get the nameservers changed. It shouldn’t take this long. Typically in my experience it has taken less than 24 hours. Only rarely does it take 72. Generally when it takes that long, there is something wrong.

Temporarily you may want to go into your dashboard to Store > My Domains and set the primary back to the WordPress.com URL.
charliehorsefurniture · Member · Aug 24, 2016 at 6:32 am
Copy link
Hi. Hosting sorted … please can you help me with formatting – wanting to make the logo larger and also remove the default menu page headings from each page eg: home, gallery and contact. Thanks.
thesacredpath · Member · Aug 24, 2016 at 7:25 pm
Copy link
Hi there, this will remove the page titles from the static pages.
```
.page #page-header {
    display: none;
}
```
On the logo, I can enlarge it, but it will lose quality since it is only 300px x 80px right now. If you make another at a larger size, perhaps 500px wide, then I can work out the code for you.
charliehorsefurniture · Member · Sep 5, 2016 at 5:41 am
Copy link
Hi .. sorry … from my login, I click on “view Charliehorsefurniture.co.nz; click on Edit, click on HTML and paste the above code above:
<h4 style=”text-align: center;”>* HANDCRAFTED * QUALITY * TIMELESS * PERSONAL</h4>
Ken of Charliehorse Furniture ….

and I end up with the code .page #page-header {
display: none;
}
displaying on the page.

What should I be doing ….
thesacredpath · Member · Sep 6, 2016 at 7:41 pm
Copy link
@charliehorsefurniture, the code I posted is CSS. Go to Customize > CSS, delete all the informational text in that window, and paste in the custom CSS I posted above and it will remove the page titles.

No items found.