Logo in sticky navigation is blurry

Hi Irene,

the issue is related to the logo, text based logos don't rescale very nicely. I would suggest that you use an SVG logo which will remain sharp whatever the size:

https://docs.generatepress.com/article/adding-svg-logo/

Hi David,
I've followed the steps in the link you gave me. But now the sticky navigation logo is tiny and I can't see it.
Is there a CSS code for navigation logo to set the size?

Thanks for your help.
https://albf2.irenepenrose.com/

Hello!

Try to add this CSS (e.g. Customizer -> Additional CSS) or in your style.css:

.main-navigation .navigation-logo img {
padding: 0 !important;
}

Best regards,
Heiko

Thanks it works, but can the logo be a little bit bigger.
Best,
irene

Hello Irene!

Your site has some inline CSS, where the size of your logo is fixed. I do not know, whether you added this to your site or where this comes from. There are set heights for your logo and a lot of different screen sizes:

So maybe try this or remove the inline css from your site:

.main-navigation.sticky-navigation-transition .navigation-logo img {
height: 60px !important;
}

Best regards,
Heiko

Thanks for the assistance Heiko, the logo will size itself to the menu item height of navigation. You can set this in Customiser > Layout > Sticky Navigation > Menu item height

Thanks for your help.
Now I have the issue, that when I'm at the top of the page, the logo doesn't appear. When I do one scroll then it's here.

Hi Irene,

as its an SVG you still need to specify a minimum height for the site logo try:

.site-logo {
    min-width: 350px;
}

Ok, it works thanks.
There's a screensize that doesn't work very well. I'd like to change the tablet size for responsive display. Where can I do that?
Shall I just modify in the custom CSS?

Thanks

Hi,

you can use a media query in the CSS to set a logo size for tablet. Something like this:

@media (max-width: 1024px) and (min-width: 768px) {
    .site-logo {
        width: 250px;
    }
}