I would like to use the iFrame embed option provided by Square (www.squareup.com) to get my Square Marketplace store onto my Salient Wordpress site. Everything works, except that the Square store uses a Lightbox technique when you click on a store item, and when the image pops up, it's behind the sticky-header of the website.
Same thing happens if you click on the fly-out shopping cart from the right side. The top portion is covered/blocked by the website's sticky header.
Is there a snippet of CSS that I can use to have the Square store pop-ups show on top of the sticky header? Or move the Square pop-ups down lower on the page?
It pushed my header image further down the page, but the store still appears behind my top header navigation when it pops up in lightbox mode.
If you look at the page, you'll see about 250 pixels of black above my header image now. Then click on one of the store items, you'll see when it pops up that the top portion of the item is still covered by the top header navigation bar.
Well, that sort of works. Firefox works great. But in Safari or Chrome, it only works if the user has scrolled down below the header, otherwise the image still pops up with the header on top of it. Plus, for some reason both Safari and Chrome lose the scroll bar after closing the popup, so it's not possible to scroll up or down on the page.
Oh well. I guess embedding SquareUp isn't the best option.
Hello,
I would like to use the iFrame embed option provided by Square (www.squareup.com) to get my Square Marketplace store onto my Salient Wordpress site. Everything works, except that the Square store uses a Lightbox technique when you click on a store item, and when the image pops up, it's behind the sticky-header of the website.
Same thing happens if you click on the fly-out shopping cart from the right side. The top portion is covered/blocked by the website's sticky header.
Is there a snippet of CSS that I can use to have the Square store pop-ups show on top of the sticky header? Or move the Square pop-ups down lower on the page?
See page example here:
http://beckman.ws/?page_id=214
Thanks!
Justin
Hey,
Thanks
ThemeNectar Support Team
Thanks! But that didn't seem to work.
It pushed my header image further down the page, but the store still appears behind my top header navigation when it pops up in lightbox mode.
If you look at the page, you'll see about 250 pixels of black above my header image now. Then click on one of the store items, you'll see when it pops up that the top portion of the item is still covered by the top header navigation bar.
http://beckman.ws/?page_id=214
Thanks!
Justin
Hey Again,
The only solution i can think of is to make the menu non sticky for that page :
Thanks
ThemeNectar Support Team
Well, that sort of works. Firefox works great. But in Safari or Chrome, it only works if the user has scrolled down below the header, otherwise the image still pops up with the header on top of it. Plus, for some reason both Safari and Chrome lose the scroll bar after closing the popup, so it's not possible to scroll up or down on the page.
Oh well. I guess embedding SquareUp isn't the best option.
Thanks for trying!
- Justin
Hey! Also try turning your styled scrollbar off in the theme options panel to clear the scrolling problem