[Resolved] Problem with mobile fixed header

[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

[Elvin]

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. 🙂

[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?

[Elvin]

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. 🙂

[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?

[Elvin]

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?

[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.

[Elvin]

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

[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?

[Elvin]

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.

[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

[Elvin]

Glad you got it sorted. No problem. Stay safe! 😀

[Author]

Posts