site logo

betterdrivereducation · Member · May 8, 2017 at 1:27 am
Copy link

Add topic to favorites
My brand logo exceeds the current logo dimensions settings. How do I modify the allowable logo dimensions so that my entire logo will display on the page?

The blog I need help with is: (visible only to logged in users)
dcoleonline · Staff · May 8, 2017 at 7:54 pm
Copy link
Hi there,

I’m afraid it isn’t possible to modify the allowable logo dimensions, as this requires access to the underlying code structure of the theme which we don’t offer.

However, I do have an alternative idea that might fit your needs.

You can place a larger image above the site description right where the logo normally appears. To do that, enter this CSS via My Site > Customize > CSS:
```
/* Show larger custom image above site description */

.site-description:before {
    content: '';
    height: 350px;
    background: url(PUT YOUR IMAGE URL HERE) no-repeat center;
    background-size: contain;
    display: block;
}
```
Just change the 350px up or down until the image is the size you like. (Note that the image won’t be a link, but it will display.)

If you still want to show a smaller version of your logo on mobile devices and in the “sticky” header on desktops, that is possible.

For that, just add your logo from Customize > Site Identity at a size of 520 × 236.

Then, you can use this CSS to hide the logo from where it would normally display above the site description, since you’ll have a larger image there:
```
@media screen and (min-width: 1060px) {

    /* Hide existing logo on desktop */

    .custom-logo-wrap img {
        display: none;
    }

    /* Show existing logo in desktop sticky header */

    .header-stick .custom-logo-wrap img {
        display: inherit;
    }
}
```
If you add both sets of CSS, you’ll have a larger image on desktops before you scroll down, and the smaller logo will still be visible on the desktop sticky header and also on mobile devices.
betterdrivereducation · Member · May 8, 2017 at 11:24 pm
Copy link
Hi,

Thanks for your response. I noticed that the CSS you gave me only allows me to change the height of the image. My logo is within the suggested height requirements (after cropping some white space) for the site logo but it is more than twice the width.
The suggested image dimensions are 520 x 236 (as you know).
The actual image size is 1380 x 290.
With the solution you have given me, will I have to adjust the width as well or is the width a nonissue?
Also, would a different theme allow for my logo’s dimensions in the “site logo” feature? If so, which themes would you suggest?
FYI: The site I am trying to build is a trade blog for driver education instructors.

Thanks ,

Matt
dcoleonline · Staff · May 8, 2017 at 11:48 pm
Copy link
Hi Matt,

With the solution you have given me, will I have to adjust the width as well or is the width a nonissue?

You won’t need to enter the width. You’ll automatically see the entire image.

Also, would a different theme allow for my logo’s dimensions in the “site logo” feature? If so, which themes would you suggest?

Most themes (Nikau included) allow you to crop a header image or leave it at full size, but the logo image is going to be a fixed size. That size will vary based on the theme. The Nikau header image appears beneath the menu, rather than above the site description.

No items found.