[Resolved] Problem with mobile fixed header

Home Forums Support [Resolved] Problem with mobile fixed header

Home Forums Support Problem with mobile fixed header

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2039613
    Nico

    Hi There!

    The size of the logo is changing at mobile view (fixed header) if we scroll down as you can see at the vid here:

    https://immarketingforum-my.sharepoint.com/:v:/g/personal/marcuz_hello-world_net/ERLR9Xu_msxCsMUHxyDHFyMB1w5dLGC_m3hdcBjmTpExSQ?e=nQ2pn9

    how can we fix the problem
    thnx for helping
    Nick

    #2039619
    Elvin
    Staff
    Customer Support

    Hi Nick,

    Can you view the front-end of the site? To observe it’s behavior and provide CSS write-up so the size get retained when the header is in sticky mode.

    You can provide the necessary details on the private information text field. Let us know. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #2039628
    Nico

    Hi Elvin. Thnx for reply. I’m not sure if I understand “Can you view the front-end of the site” right.

    Does it mean to post the link to the test page as you can see it here?

    #2039630
    Elvin
    Staff
    Customer Support

    Does it mean to post the link to the test page as you can see it here?

    That’s right. And thanks. I’ve inspected the page. πŸ™‚

    Try adding this CSS:

    .main-navigation.sticky-navigation-transition .site-logo img {
        height: 65px;
    }

    This should force the logo size to be retained on sticky mode. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #2039642
    Nico

    Hello Elvin, I think the snippet almost solves the problem. But if you look closely at the text “Menu” while scrolling in the mobile view, you can see that it is moving. Something doesn’t really fit there yet.

    Can you see it?

    #2039649
    Elvin
    Staff
    Customer Support

    It’s very subtle but I see what you mean.

    Can you try setting the transition to “none” on Appearance > Customize > Layout > Sticky Navigation and see if it achieves the desired result?

    A wise man once said:
    "Have you cleared your cache?"

    #2039658
    Nico

    Nope. Problem is not solved.

    Yes, I agree with you, it’s very subtle. However, we are working on this project for a customer and they always look very carefully. Sorry for that Elvin.

    #2039671
    Elvin
    Staff
    Customer Support

    You can try adding this in for the menu text:

    nav#mobile-header button.menu-toggle {
        transition: none !important;
    }
    
    nav#mobile-header.sticky-navigation-transition button.menu-toggle {
        line-height: 65px;
    }

    As for the entire header itself, that’s from having “none” for transition. Consider using fade for a less jarring transition between sticky and static header .:D

    A wise man once said:
    "Have you cleared your cache?"

    #2040178
    Nico

    Elvin your snippet is working. However, it only works as long as the height of the mobile menu is 65 pixels. Could it be that GeneratePress has a bug per se and that you/we should open a ticket in the development department for the “real solution”? What do you think?

    #2040640
    Elvin
    Staff
    Customer Support

    Not exactly sure it can be classified as a bug as the function is intact. But it can be confusing at times though.

    Actually, we can skip the CSS if we want. (This is actually the optimal solution. My apologies on skipping this one)

    If you set Menu Item Height set on Appearance > Customize > Layout > Primary Navigation equal to the Menu Item Height set on Appearance > Customize > Layout > Sticky Navigation the sizing should be intact when it goes to sticky mode.

    The difference between the values of the 2 is actually what’s changing the size on transition. If it’s equal then the sizing won’t change.

    A wise man once said:
    "Have you cleared your cache?"

    #2040811
    Nico

    Good morning Elvin!

    That was the problem. Thank you very much.

    Don’t apologize, the GP support is really great.

    I think we can close the ticket.

    Greetings from Germany
    Nick

    #2040820
    Elvin
    Staff
    Customer Support

    Glad you got it sorted. No problem. Stay safe! πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

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