Issue with navigation logo

Hi there,

Give this CSS a shot:

.site-logo {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
}
.navigation-branding img {
    height: 100px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Perfect thanks!

No problem :)

Is there a way to keep it from shrinking down so small? In the example site the logo remains larger and floats off the nav bar.

Do you have a sticky navigation logo uploaded?

If it's the same as the static logo, can you remove that first?

Let me know :)

I removed the sticky nav logo

Add this CSS as well:

@media (max-width: 1024px) and (min-width: 769px), (min-width: 1025px) {
    .main-navigation.sticky-navigation-transition .site-logo img,
    .main-navigation.sticky-navigation-transition .navigation-branding img {
        height: 200px;
    }
}

That didn't do it. Now the logo is small until you scroll and then it grows.

Wait It is working just not with the editor open. Then it has the opposite features. Bizarre, but thanks for the quick turn around. How do we adjust for tablet and mobile view?

I was able to resize for tablet and mobile but am not able to add left padding.

Tablet breakpoint is @media (max-width: 1024px) and (min-width: 769px) so you can do this:

@media (max-width: 1024px) and (min-width: 769px) {
    .main-navigation.sticky-navigation-transition .site-logo img, .main-navigation.sticky-navigation-transition .navigation-branding img {
        padding-left: 10px;
    }
}

Now nothing is working correctly. Here is what I have
.site-logo {
position: absolute;
left: 0;
top: 0;
z-index: 999;
}
.navigation-branding img {
height: 200px;
}
@media (max-width: 1024px) and (min-width: 769px), (min-width: 1025px) {
.main-navigation.sticky-navigation-transition .site-logo img,
.main-navigation.sticky-navigation-transition .navigation-branding img {
height: 200px;
}
}
@media (max-width: 1024px) and (min-width: 769px) {
.main-navigation.sticky-navigation-transition .site-logo img, .main-navigation.sticky-navigation-transition .navigation-branding img {
padding-left: 10px;
}
}
}

If I use this it works great for mobile but the desktop logo no longer works.

@media (max-width: 1024px) and (min-width: 769px), (min-width: 1025px) {
.site-logo {
position: absolute;
left: 0;
top: 0;
z-index: 999;
}
.navigation-branding img {
height: 200px;
}
.main-navigation.sticky-navigation-transition .site-logo img,
.main-navigation.sticky-navigation-transition .navigation-branding img {
height: 100px;
}
}
@media (max-width: 769px){.site-logo
{position: absolute;
padding-left: 10;
top: 0;
z-index: 999;
}
.navigation-branding img {
height: 100px;
padding-left: 10px;
}
@media (max-width: 769px) {
.main-navigation.sticky-navigation-transition .site-logo img,
.main-navigation.sticky-navigation-transition .navigation-branding img {
height: 70px; padding-left: 10px;
}
}
}
}

I’m a bit confused what the desired outcome is.

Do you want the logo to resize in sticky navigation?

Is the padding only required on tablet? Is it for moving the logo to the right?