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

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

Home Forums Support Headline gets stuck behind header when scrolling back to top of page

Viewing 15 posts - 1 through 15 (of 34 total)
  • Author
    Posts
  • #455258
    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.

    GeneratePress 2.0.1
    GP Premium 1.5.6
    #455308
    Leo
    Staff
    Customer Support

    Hi there,

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

    Can you try clearing your browser cache?

    #455312
    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

    #455318
    Leo
    Staff
    Customer Support

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

    and provide the direct links here.

    #455326
    mike

    Here are 2 screenshots

    1 as page loads
    2 after scroll

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

    Thanks

    #455347
    Tom
    Lead Developer
    Lead Developer

    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.

    #455366
    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

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

    #455559
    Leo
    Staff
    Customer Support

    Hmm I still see the original CSS being added.

    Can you double check?

    #455564
    mike

    please check again

    i was playing around with it in frustraton

    #455570
    Leo
    Staff
    Customer Support

    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

    #455575
    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

    #455578
    mike

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

    Thanks a bunch!

    #455583
    mike

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

    #455587
    mike
Viewing 15 posts - 1 through 15 (of 34 total)
  • You must be logged in to reply to this topic.