Topic: Issue with Social CTA Element Positioning in English Translation

YEAR93
October 31, 2025 at 11:22 am

I’m experiencing an issue with one of my GP elements in the English version of my site.
The social CTA element named “CTA – Collapsed Mobile Menu Bottom” (located at the bottom left of the slide-out mobile menu) is not positioned correctly when viewing on an iPhone.

I’ve added a screen recording to illustrate the issue.

Could you please advise how this can be fixed so that the element appears correctly on mobile for the English translation?

Ying

October 31, 2025 at 12:18 pm

Hi there,

It’s because you have this CSS setting a static height for the navigation:

@media (max-width: 1024px) {
    .has-inline-mobile-toggle #site-navigation.toggled {
        height: calc(100dvh - 140px + var(--topbar-offset));
        margin-top: 20px;
        border-top: 1px solid #e6e6e6;
        overflow: auto !important;
        touch-action: none;
    }
}

And it seems the var(--topbar-offset) is 0 currently.

YEAR93
November 4, 2025 at 4:03 am

Thanks for the explanation. What I don’t understand is why it only happens on the English version the Dutch version works perfectly fine with the same CSS.

Is there a reason why var(--topbar-offset) would be 0 only on the English version? Could this be related to a missing element that affects that variable?
Ying
November 4, 2025 at 9:53 am

How did you set up thevar(--topbar-offset)?

YEAR93

November 5, 2025 at 3:22 am

I use this JS snippet, I got from Generatepress support:

document.addEventListener("DOMContentLoaded", () => {
  const rootElement = document.documentElement;

  // Function to get the visible topbar element
  const getVisibleTopbar = () => {
    const topbars = document.querySelectorAll('.topbar');
    for (const topbar of topbars) {
      if (getComputedStyle(topbar).display !== 'none') {
        return topbar;
      }
    }
    return null; // Return null if no visible topbar is found
  };

  // Function to calculate and set the non-visible height of topbar
  const updateTopbarNonVisibleHeight = () => {
    const topbar = getVisibleTopbar();
    if (!topbar) return;

    const topbarRect = topbar.getBoundingClientRect();
    const totalHeight = topbarRect.height;
    const visibleHeight = Math.max(0, Math.min(topbarRect.bottom, window.innerHeight) - Math.max(topbarRect.top, 0));
    const nonVisibleHeight = totalHeight - visibleHeight;

    rootElement.style.setProperty('--topbar-offset', nonVisibleHeight + 'px');
  };

  // Function to handle changes in the mobile-menu-open class
  const handleClassChange = () => {
    if (rootElement.classList.contains('mobile-menu-open')) {
      updateTopbarNonVisibleHeight();
    }
  };

  // Observe the class attribute on the <html> element
  new MutationObserver(handleClassChange).observe(rootElement, { attributes: true, attributeFilter: ['class'] });

  // Add event listeners for scroll and resize to ensure the calculation is up-to-date
  window.addEventListener('scroll', updateTopbarNonVisibleHeight);
  window.addEventListener('resize', updateTopbarNonVisibleHeight);

  // Initial check in case the mobile menu is already open on load
  handleClassChange();
  updateTopbarNonVisibleHeight(); // Ensure the initial calculation is made
});

Ying
November 5, 2025 at 2:16 pm

The script isn’t working on any language version of the site that I can see – seems it cannot find the topbar elements.

David identified this issue as a problem the first time around. The optimizations on the site were deferring the loading of the scripts.

Please refer to David’s reply on your other topic:
https://generate.support/topic/mobile-toggle-menu-height/#post-124877

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Issue with Social CTA Element Positioning in English Translation