Okay
  Public Ticket #392775
Square Marketplace Store iFrame Embed
Closed

Comments

  • Justin started the conversation

    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

  •  8,849
    Tahir replied

    Hey,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    .page-id-214 div#ajax-content-wrap {
        margin-top: 250px !important;
    }

    Thanks



    ThemeNectar Support Team 

  • Justin replied

    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



  •  8,849
    Tahir replied

    Hey Again,

    The only solution i can think of is to make the menu non sticky for that page :

    .page-id-214 div#header-outer {
        position: absolute !important;
    }

    Thanks


    ThemeNectar Support Team 

  • Justin replied

    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


  •  1,075
    ThemeNectar replied

    Hey! Also try turning your styled scrollbar off in the theme options panel to clear the scrolling problem