Conflict with X-Theme’s fixed header

  • Resolved kalatix

    (@kalatix)


    7 years, 8 months ago

    Hello! Having a bit of conflict with my fixed header.

    1. head to https://mozay.com/
    2. Click on a “get started” button to open the popup. Now exit the popup. Scroll about half way down the page.
    3. What’s SUPPOSED to happen is the header behaves normally, is always shown, and is always the full width of the viewport.
    4. What IS happening is the header shrinks until it disappears when you get about halfway down the page. You will see that it’s a smooth, almost parallax-type transition – meaning it’s not being cut off by any elements on the page.
    5. You will also see that when you exit the popup, the header is shrinking on the right side, where a gap is appearing. It’s more noticeable when your window is less than 1000px wide. Most noticeable on mobile sizes.
    6. Some other details:
    the header and all of its containers are maintaining their proper height as far as I can tell, but the inspector shows something changing via javascript on scroll.
    I tried deactivating the plugin and it stopped. Upon reactivation, the problem came back.
    This happens on every page with every popup. Try https://www.mozay.com/about and click on “join us”.
    In case it matters, we’re using X-Theme and built our pages in Cornerstone.

    Thanks for the plugin! I appreciate the work you have already put into this.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter kalatix

    (@kalatix)

    … forgot to add browser details. I’m using Chrome 56.0.2924.87 on OSX El Capitan.

    In firefox it breaks the header so it’s not fixed anymore.

    This error doesn’t occur in Safari.

    • This reply was modified 7 years, 8 months ago by kalatix.

    @kalatix

    I’ll have our Lead Dev @danieliser take a look as soon as possible.

    Thank you for being patient.

    Thread Starter kalatix

    (@kalatix)

    Thanks! I still haven’t been able to figure it out.

    Plugin Author Daniel Iser

    (@danieliser)

    @kalatix – Curious how you did the glazed background for your popup. Can’t see anything via the browser inspector such as CSS etc.

    As for what you described: In Chrome latest I see none of what your describing. Has it cleared up already?

    I can scroll down, trigger the popup, close it, scroll around, reopen it and no issues with the fixed nav or changes in its size beyond the initial resizing when you first start scrolling, but that is unrelated to PM as it seems intentional.

    As for firefox the menu does break, but yet again not due to PM as it does it before I trigger a popup. What I am seeing is that the height is reduced to 52px (same as chrome), but the Logo is being allowed to grow bigger than that causing it to be taller than the menu, and it also appears the menu items are vertically centered so when the logo gets too big the menu items center partially off the menu bar. All of which is CSS based, not effected by our stuff that I can see.

    I also tested on mobile chrome and didn’t see any gap issues in the header on either Chrome mobile emulator or the Chrome on my iPhone.

    Hope that helps. Based on what I have seen it appears to work correctly except for the CSS tweaks needed for Firefox.

    Thread Starter kalatix

    (@kalatix)

    @danieliser – That’s so weird! It’s definitely not happening anymore. Here are a few of my thoughts as to why:

    I had 4 similar popups, all lightboxes with the same formatting and similar classes in them. They all housed gravity forms. All popups were activated by button clicks and were positioned similarly.

    Recently I added another popup (the welcome mat-style popup at the bottom) and I was having some strange conflicts. If the welcome mat was up and you clicked on a contact button to bring up the lightbox, it wouldn’t show the lightbox form at all or get rid of the welcome mat. I went through and disable the “stackable” option on all the popups but it was still happening. I ended up coding a jquery event on button click that would exit the welcome mat, and that fixed it.

    There was one more issue I was having, which was caused by my setting the .pum-overlay to position:relative instead of absolute or fixed. That pushed the form off the screen only sometimes but I ended up squishing the form so I didn’t need any overflow scrolling. So I changed them all back to fixed.

    Not sure if any of that will be helpful if you come across this again.

    Thanks for the heads up about Firefox – I thought I fixed that bug but I’ll take another look.

    To answer your other question about the background: I used the foggy plugin by nbartlomiej. I ended up adding a jquery mutation observer to check when any .pum-overlays were getting set to display:block, then I activated the foggy plugin for the topmost div in the body that didn’t inlclude the popup. I also added a translucent white filter to further mimic the frosted glass look that is so popular with the kids nowadays ??

    Thanks for your help!

    • This reply was modified 7 years, 8 months ago by kalatix.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Conflict with X-Theme’s fixed header’ is closed to new replies.