How to change size and resolution of logo in Shapely?

Shapely
1

Hi! I love the Shapely theme, but I want to tweak some of the pre-defined characteristics. (My website: fantifico.com)

This thread is about the logo. My logo is too small and when I made it bigger, the resolution gets messed up and it gets too big for the navigation bar on a computer screen (it surprisingly works well on mobile).

I know there are other threads about similar issues, but I’m pretty new to CSS and I get really confused by all the instructions and suggestions everyone post. So I’ll be ever so grateful if you could provide me some guidance regarding my specific issue.

After I realized the logo was too small and when I didn’t have any Custom CSS for this, I applied this Custom CSS:
.nav-bar .row .left {
height: 17px!Important;
}
which I think it meant that it added 17px to the navbar. That size works for me. It didn’t do anything on the actual site, but it did on the editing page.
Next step I took was to include this in the Custom CSS:
.logo {
max-height: 70px!Important;
height: 70px!important;
width: auto!Important;
}
That made the logo get bigger, but there are two issues about it (see 1.png):

  • it uses the 135x55 image that got uploaded in the first place, so the resolution is bad. It doesn’t let me add a better-resolution image. This happens both on computer and mobile screens.
  • the navigation bar stays smaller than the logo. This happens live on a computer screen, but live on mobile it looks good. However while editing, it does adjust the size. (see 2.png)

I wouldn’t like to add a Child Theme, since I’m not familiar at all with CSS… But if that’s the only solution, I’d have to!

Could you guys help me please? Thanks!

2

Hello there,

I hope you are doing well today.

I am a bit confused here as I have looked at your website and the logo is not overlapping the nav bar. Please try clearing your browser cache and refreshing the page and tell me if the issue persists.

Best Regards,
Support

3

Hi Support
No, it’s not overlapping. I don’t like leaving errors on my website while I’m not working on it. So I reversed it for the time being.

The screenshots should help you, though or do you need to see the error on the actual website?

4

I put the error back, so you can see the overlap.

The other problem is the resolution. I made this to get the logo bigger, but if it uses the same (smaller) image, then it’s no good, right? How could I change that?

Thanks!

5

Hi there,
Thanks for keeping in touch with us.

  1. You may need to change that image to a PNG and remove the white background so that you have a transparent image that can be stretched right to the end of the header safely.

  2. To get a higher resolution, you’ll need to use a larger image. Your image currently is 55px tall, however, the height as implemented on the site is 70px.

I hope this helps :slight_smile:

Best Regards,
Support