Site logo

[Resolved] Sticky On Scroll Logo Issue

Home Forums Support [Resolved] Sticky On Scroll Logo Issue

Home Forums Support Sticky On Scroll Logo Issue

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #2457334
    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?

    #2457428
    Leo
    Staff
    Customer Support

    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/

    #2457448
    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?

    #2457459
    Leo
    Staff
    Customer Support

    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.

    #2457465
    Michelle

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

    #2457468
    Michelle

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

    #2457469
    Michelle

    Should the mobile menu be on or off?

    #2457482
    Michelle

    I sorted it out.

    #2458265
    Leo
    Staff
    Customer Support

    Glad to hear 🙂

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.