Logo

[Nicole Snyder]

Hi Bill –

I finally had my logo created & just removed the “Grassroots one that sat in the top left corner of the page & replaced it with mine. When I viewed the page, my logo takes up the entire hero section. How can I change it so that it’s scaled to fit in the top left where you had the “Grassroots” logo? I uploaded the image in Theme Options – Header & it’s also in the logo section of customizer. Was there another location?

[Nicole Snyder]

I left it like that so you can see when you go to the URL. It also completely removed my nav menu.

[Bill Robbins]

Hello Nicole,

Great question there. The logo area does not resize images automatically. I do that because people logos in all shapes and sizes and fixing a size caused all kinds of trouble when I used to do that.

So now they just display images with their actual dimensions. So to make the logo smaller, you’ll want to resize your image with an image editor.

In case you don’t have one handy, I’ve attached one that’s a bit smaller for you to this post. Let me know if I can help out.

Thanks,
Bill

Attachments:

1. 

   livlogo.png
   

[Nicole Snyder]

Hi Bill – I was able to play around with the image size & got the size to be perfect, but how do I get rid of the negative space on the left side of the image? I’d like the image to be in the upper left corner without the gap & nothing seems to get it there with resizing.

[Bill Robbins]

It is possible to move the logo outside of the “wrap” that holds the content in the middle of the screen. Here’s how:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #header-content {
   	position: static;
   }
   
   #logo {
   	position: absolute;
   	top: 0;
   	left: 0;
   }
   

3. Update your settings.

Let me know if you have any questions.

Have a great weekend,
Bill

[Nicole Snyder]

Worked! Thank you!

[Bill Robbins]

Fantastic 🙂

[Bill Robbins]

You can hide the logo on smaller screens. Here’s how:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   .slicknav_menu  .slicknav_menutxt {
   	text-shadow: none;	
   }
   
   @media only screen and (max-width: 767px) {
   
   	#logo {
   		display: none;
   	}
   
   }
   

3. Update your settings.

That also takes out the text shadow in the navigation menu button…it seemed a bit out of place with the colors there.

Let me know if that doesn’t work for you.

[Author]

Posts