[Resolved] Sticky On Scroll Logo Issue

[Michelle]

On mobile, my sticky logo appears to zoom in on scroll because the sticky logo is larger. When I make the sticky logo smaller, then the logo becomes too small on desktop scroll. I haven’t encountered this issue before; not sure why it’s occurring or how to fix it.

My aim is to have the logo remain the same size on scroll for all sizes.

What I’ve done so far:

I found this on the forum (#2060431), and followed David’s advice.

go to Customizer > Layout > Sticky Navigation and set it to Desktop Only.
then in Customizer > Layout > Header enable the Mobile Headers sticky option.

Add the following css:

@media (max-width: 768px) {
#mobile-header.sticky-navigation-transition .site-logo img {
height: 50px !important;
}
}

Current result:
The above worked when I changed the mobile header to “off” and adjusted the height, but now the desktop logo gets smaller on scroll.

What can I do?

[Leo]

Hi there,

Do the steps here:

1. Remove the sticky navigation logo – it shouldn’t be needed as it’s the same as the static logo:
https://www.screencast.com/t/3fTcjJtZc

2. Hit the Reset button to reset the Menu Item Height – don’t set anything here:
https://www.screencast.com/t/gKvVqYJWadK

3. Find this CSS in the Additional CSS field:

/*Styling for member login with menu-label (specific navigation label that you call menu label) to look like a button*/
.main-navigation .main-nav ul li.login-logout a {
  font-size:14px;
  padding: 10px;
  background-color: #b80000;
  color: #ffffff;
  border-radius: 5px;
  line-height: 12px;
}

Remove the padding: 10px; line and use the line-height: 12px; to control the size.

This is explained here: https://docs.generatepress.com/article/adding-buttons-navigation/

[Michelle]

Thank you. That fixed the logo. 🙂

P.S. When I deleted the padding: 10px, the login/logout button lost its top and bottom so I added it back. Is there a different way to make the button look right?

[Leo]

Did you see my suggestion above about using the line-height to control its size?

It’s currently set to 12px. Try something like 40px.

[Michelle]

Yes, using 40 px worked well for the button, thank you.

[Michelle]

I’d like to be able to control the line width as well as height. It’s long on the right and left.

[Michelle]

Should the mobile menu be on or off?

[Michelle]

I sorted it out.

[Leo]

Glad to hear 🙂

[Author]

Posts