Logo VS Site Title – need help

Lovely to see you again, @churchillnancy! ??

If you navigate to Appearance > Customize > Site Title, Tagline, and Logo you should see a check box next to “Display Site Title and Tagline”. If you uncheck that box then your title will disappear from view but remain visible in the browser tab as well as search engine results.

Can you give that a try?

Hi @siobhyb! So happy to see you! You are my favorite! ??

That was an easy fix! Woohoo!

Now, I have a follow on question…
I now have a cute logo, but the size of the image is too small. Is there a way to increase the size of the logo display?

Thanks so much for your great support, Siobhan!

Hi @churchillnancy! Glad that worked to hide the title. ??

Goran’s logo will always get cropped to a maximum height of 192px by the theme. The width will scale to the height (and be a maximum of 583px).

You could increase the amount of space that the logo takes up with some custom CSS, however, this won’t increase the actual image and may lead to some quality loss.

If you’d like to try CSS then you could use the following:

@media screen and (min-width: 1020px) {
    .site-branding {
        width: 400px;
    }

    .site-logo {
        height: 400px;
        max-height: inherit;
    }
}

In the above snippet, change the values of height and width to your liking. The above will also only change your logo’s size on screens that are 1020px in width or wider, so that the logo will remain as it is now on mobile devices.

It would be possible to change the actual size of the logo (to avoid loss in quality) via a child theme but, as I explained in this other thread, that would be tricky to do with Goran as it is already a child theme to Edin.

Take a look through the above information and don’t hesitate to let me know if you have any questions.

@siobhyb, answers like these are why you are my favorite! Have I told you yet today how much I love you? You’re just so awesome! My logo looks much better!

I would like your help with a bit of fine tuning… in my tests, I couldn’t exceed a width of 422px without causing the Logo to jump out of it’s proper place… it ended up above the image. You said above the max width was 583px.

I wonder if there is a way to move the logo position over so that it is closer to the left edge of the screen? Maybe that would then allow me to increase the width a little more.

Here’s what I ended up with:

@media screen and (min-width: 1020px) {
    .site-branding {
	width: 422px;
    }

    .site-logo {
        height: 196px;
        max-height: inherit;
    }
}

When I use the above code snip, I can’t see the change in the customizer, I have to save/publish, and then go refresh the page I’m using to view the site.

Immediately following the above code, I also added the next code snip (which I had found on a older discussion about logo on the goran forum).

This code does cause a change that can be seen in the customizer, but not on the site (on the computer). I realized when I saw your code above, that the code below shows up if one views the site on mobile, but the user must choose “view full site”. These two code snips do not appear to conflict with each other, but I’d like to know if I should not use them both at the same time. Right now, I have both of these snips live on the site.

 .site-logo {
margin: 5 auto;
width: 601px;
height: auto;
}

Thanks so much for your help with these questions. You are my Sunshine!
Unconditionally yours, Nancy

• This reply was modified 7 years, 1 month ago by churchillnancy.

@siobhyb…
I just realized that my logo is misbehaving… so naughty! I thought the size I had found of 422px was going work great. However, I just happened to open the site on a browser window that was significantly smaller than the one I had open earlier… and there my logo sits on top of the photo! Sassy thing! HELP!

If you look at the site and the logo is on the photo next to the window where it belongs, just resize the window, and “Lil-Jumpy Logo” starts to jump on top of the logo…

How do I keep this thing where it belongs? xoxoxo Nancy

Hi Nancy. Your flair for words definitely makes me smile. ??

If you resize the Goran theme’s demo site within your browser, you’ll notice the same effect that you see on your site. The logo and site title are meant to move above the photo on smaller screen sizes, it’s a design decision that was made by the theme’s author.

This design decision was likely influenced by the way that the menu has to change in order to be readable on smaller devices.

There isn’t any easy way to move the logo beneath the menu but it’s worth bearing in mind that only those viewing your site on devices that are 1020px in width or smaller will see this version of the theme.

As for the two pieces of CSS you added: I recommend trimming it down to the following:

@media screen and (min-width: 1020px) {
    .site-branding {
		width: 422px;
	}

    .site-logo {
        height: auto;
        width: 601px;
    }
}

The above will size your logo the same way but some redundant CSS is trimmed.

Hope that helps!