[Resolved] Retina logo in sticky navigation

[donaldjenkins]

One irritating thing—unless I’m missing something—about GeneratePress’s sticky navigation feature is that whereas, in the Customizer, when setting the site logo in Site Identity, you have the option to set a standard image and a Retina image, this option isn’t available when setting the logo for sticky navigation.

The result of this is that on Retina screens, there is a distinct difference in the logo’s definition when you scroll down a page and the screen switches from the Retina logo set in Site Identity and the non-Retina logo which is the only option you can set in sticky navigation.

I suppose the way out of this inconsistency is to apply some sort of css to the sticky navigation logo, but (1) it’s not immediately obvious what that would be and (2) it would necessarily be a hack involving resizing the Retina logo.

Is there any way out of this dilemma, other than hoping it will be addressed in a forthcoming new version?

Edit: I solved this by using the WP Retina 2x plugin, and manually uploading, in the plugin settings, the same Retina image that was used in the Site Identity settings as the Retina version of the image set in the sticky navigation settings.

[Tom]

Hi there,

That’s definitely one way to solve it.

To solve it without a plugin, you can simply upload an image twice as large as it will display.

For example, if your navigation is 60px tall, upload an image that’s 120px tall. It will resize the image down automatically, and will have retina quality 🙂

[donaldjenkins]

Hm, I did try that but found it didn’t resize the image properly.

[Tom]

That’s strange, the sticky navigation should just resize the height of the image. If you’d like me to take a look feel free to upload the image and I’ll see what’s going on 🙂

[donaldjenkins]

Sure: https://i.via.dj/b5c974

[Tom]

Any chance I can see the live site? What’s it supposed to look like?

[donaldjenkins]

https://www.donaldjenkins.com/

[Tom]

So what you have set up right now uses the retina logo in the sticky navigation. That’s because you’re using the navigation as your header, so the logo in “Site Identity” is used.

[donaldjenkins]

No. That was the whole point of opening this Support Topic in the first place. The current setup does use the Retina logo in the sticky navigation. But it didn’t use it until I uploaded it as the Retina image for the smaller PNG in the WP Retina x2 settings, as I explained in the edit at the bottom of my original post.

[Tom]

Ah, sorry. I thought we were looking at why the logo was distorted without using the plugin. If you’re happy with the plugin you can definitely keep using it. If you don’t want to use it, feel free to deactivate it and upload a 2x image as the sticky logo so I can see why it doesn’t look right.

Thanks!

[donaldjenkins]

Oh that’s frightfully kind! I think as the plugin works so particularly well, I’ll keep the setup as it is.

In a sense it retrospectively made my posting about it all rather pointless, as I had found a solution. Of course, that being said, I do think it might be an idea to align the sticky navigation logo settings with those for the site logo and offer the option to upload two logos, one standard and one Retina—as otherwise people might get a tad confused!

[Tom]

Not pointless at all, I’m sure it will help someone.

I’ll look into retina images in the sticky nav, although I think uploading a larger image should do the trick. Will do some testing 🙂

Thanks!

[Author]

Posts