Sticky Header on Mobile

  • angelod1795

    (@angelod1795)


    2 months, 1 week ago

    I changed the position of the header to be sticky. However, the header still was not sticky. So I added the following custom CSS which made the header sticky and it remain sticky when scrolling to the bottom of the page on desktop, but on mobile, the header is only sticky for about a third of the way down the page. Can somebody please help me change the CSS so that the header remains sticky when scrolling all the way down the page on mobile?

    header:has(>.is-position-sticky) {
    position: fixed;
    top: calc(0px + var(–wp-admin–admin-bar–height, 0px));
    left: 0;
    right: 0;
    z-index: 9999;
    }

    • This topic was modified 2 months, 1 week ago by angelod1795.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • rodicaelena

    (@rodicaelena)

    2 months ago

    Hi,

    This is a tricky situation, with this custom code. While we don’t usually help with custom code, I can suggest you try replacing the code with this one, as this is the normal code for a sticky header

    header {
      position: sticky;
      top: calc(0px + var(–wp-admin–admin-bar–height, 0px));
      z-index: 9999;
    }

    and try removing all styles added in this section of your page https://vertis.d.pr/i/pYRDcd as this section seems the one to be interfering with the normal sticky header code.

    Kind regards!

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.