[Resolved] Headline gets stuck behind header when scrolling back to top of page

[mike]

I have a serious situation and can’t solve it, ON MOBILE in all pages when you scroll down – and then you scroll up the headline gets cut off behind the header instead of under it like it should – when i am logged in as admin it doesn’t happen.

[Leo]

Hi there,

I just checked your site with iPhone 6s using Chrome and can’ see the issue.

Can you try clearing your browser cache?

[mike]

Hi,

Cleared all caches

Tried it on ONE PLUS & LG android phones

BTW, i just tried removing sticky and it works fine.

Brought back sticky header in it’s happening again

Will send a screenshot from mobile

Thanks

[Leo]

You can upload screenshots to a site like this: https://postimages.org/

and provide the direct links here.

[mike]

Here are 2 screenshots

1 as page loads
2 after scroll

https://postimg.org/gallery/w0sgfwvs/

Thanks

[Tom]

Hmm, it’s like the sticky navigation isn’t aware that it’s back at the top of the site.

Do you have a staging site set up so you can make adjustments to the site without affecting the live one? It would be good to remove any navigation-related custom CSS you have added to test.

For example, this site we’re on now is using the mobile header as well, but the sticky navigation classes are removed when the navigation reaches the top of the page.

[mike]

Hi,

I’ve used your method of creating the mobile header with the logo in the middle, i did have to adjust some padding and the logo size so it will look ok because the logo was bigger than the menu, perhaps that did it?

This site is in development, there is not staging site. I only disabled coming soon mode today for testing

U can make changes live.

If needed i will send u the login details now.
I will be in front of a computer in an hour or so.

I will try removing all css.

Thanks

[mike]

So,

I have removed my css

#mobile-header .header-image {
height: 100px;
width: 100px;
}

#mobile-header {
height: 100px;
}

now the sticky works fine but the logo and menu are miniature

any ideas for the proper css?

[Leo]

Hmm I still see the original CSS being added.

Can you double check?

[mike]

please check again

i was playing around with it in frustraton

[Leo]

Try removing:
padding-top: 5px;
in

#mobile-header .site-logo {
    position: absolute;
    right: calc( 50% - 50px);
    padding-top:5px;	
	/* 50% from the left - half your image width */
}

Then add this:

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

Then you can increase the height by increasing navigation height with mobile toggle on:
https://docs.generatepress.com/article/menu-item-height-width/#height

[mike]

This made the logo bigger, but i need it to be 100px X 100px along with the header
And if possible, i would like it to shrink on sticky

[mike]

Just remembered i can change primary navigation height on mobile via the customizer

Thanks a bunch!

[mike]

A new problem – when increasing the menu height – the drop down menu height gets increased as well…..

[mike]

found this!

https://generatepress.com/forums/topic/change-menu-item-height-in-mobile/

Thanks again!!

[Author]

Posts