[Support request] Need sticky navigation logo to remain larger

[Nimie]

I have this

@media (min-width: 769px){
.main-navigation:not(.navigation-stick) .sticky-logo {
position: absolute;
top: -55px;
left: 0;
z-index: 500;
}

body .main-navigation:not(.navigation-stick) .sticky-logo,
body .main-navigation:not(.navigation-stick) .sticky-logo img {
height: 250px;
}
}
And it works great except for the navigation logo being so small on scroll and on mobile. I know the logo size is determined by the height of the nav bar but would like the logo to be bigger than nav bar if possible.

[Leo]

Hi there,

Looks like you CSS is excluding the sticky navigation specifically: :not(.navigation-stick)

Try removing that part.

[Nimie]

That didn’t do it.

[Leo]

Where did you get the code from?

Can you try this first?
https://docs.generatepress.com/article/navigation-logo/#float-navigation-logo-outside-container

[Nimie]

From Tom.

[Nimie]

Nope didn’t work. The code I have displays a large logo over the nav and then on the scroll the logo shrinks, but then it is too small to be seen well. The only way I can make it larger is to make the nav menu larger and that really doesn’t look good. I need to make just the logo on the nav bar bigger after the scroll but not as large as before the scroll which is 250px. If you take a look at the site you will see what I mean.

[Leo]

Ahh so you need the logo to shrink but still outside the container?

If so try this for the full CSS:

@media (min-width: 769px){
    .main-navigation .sticky-logo {
        position: absolute;
        top: -55px;
        left: 0;
        z-index: 100;
    }
    .main-navigation.navigation-stick .site-logo {
        top: 0;
    }
    body .main-navigation:not(.navigation-stick) .sticky-logo,
    body .main-navigation:not(.navigation-stick) .sticky-logo img {
        height: 250px;
    }
    body .main-navigation.navigation-stick .sticky-logo,
    body .main-navigation.navigation-stick .sticky-logo img {
        height: 200px;
    }
}

[Nimie]

That resized the logo better but the nav bar was also 200px. Need same logo effect with the nav bar remaining normal size. Logo needs to overhang the nav bar after scroll.

[Leo]

Can you apply the CSS so I can see the issue?

[Nimie]

Done. Need to also make sure the mobile version is larger without making the nav bar huge. If we can’t resolve the desktop issue need to at least resolve the tablet and mobile.

[Leo]

Updated the code here:
https://generatepress.com/forums/topic/need-sticky-navigation-logo-to-remain-larger/#post-771574

[Nimie]

Close. It made the logo larger after the scroll but the top half is hidden. Also did nothing to resize on mobile which is the most important.

[Leo]

I guess you need to re-position it since it’s smaller:
https://generatepress.com/forums/topic/need-sticky-navigation-logo-to-remain-larger/#post-771574

What’s wrong with mobile? the code shouldn’t affect the mobile at all.
Checked on my phone and it looks good?

[Nimie]

They want logo larger on mobile. Made the adjustment and desktop is great.

[Leo]

So that’s controlled by the menu item height with mobile toggle:
https://docs.generatepress.com/article/menu-item-height-width/

We can also remove the padding around the logo as well:

@media (max-width: 768px) {
    .main-navigation .navigation-logo img {
        padding: 0;
    }
}

[Author]

Posts