Lightbox Form messing up the page, rearranges the nav menu and etc.

 When I embed the code for a lightbox form it rearranges the rest of my page.  Is there a simple fix for this?  

Can you please provide your websites's url so we can check what is causing the issue. We will be waiting for your reply. Thank you!

I uploaded a preview page that I am working on and not a live page.

www.gatecityadvisors.com is the site.  

The market summary, schedule an appointment, and have questions should all be on the right side.   Also the navigation links at the top are moved as well.  

It seems like you are missing some CSS on the page where you injected the Form.

This CSS code is in the homepage but not on the page where the Lightbox Form is:

@media (min-width: 992px) {

    .navbar {

        height: 0 !important;

        top: -40px !important;

        -moz-transition: all 0s;

        -o-transition: all 0s;

        -webkit-transition: all 0s;

        transition: all 0s;

    }

}

To fix the market summary, schedule an appointment, and have questions try adding this CSS code to your page:

@media (min-width: 992px) {
    article + aside {
        float: right;
    }
}

I don't think the Lightbox had anything to do with messing up the page. Please check all the CSS code that is missing.

I dont even know what that means.  All I know is when I add the the code <script src ="https://form.jotform.com/static/feedback2.js" type="text/javascript"></script><script type="text/javascript"> var JFL_73386532237157 = new JotformFeedback({ formId: '73386532237157', base: 'https://form.jotform.com/', windowTitle: 'Social Security Information Request', background: '#FFA500', fontColor: '#FFFFFF', type: '2', height: 500, width: 700, openOnLoad: false }); </script> <a class="btn lightbox-73386532237157" style="margin-top: 16px"> Social Security Information Request </a> to the page it messes up and when I remove the code the page is fixed.  When I put the code for any other form it works just fine.  Process of elimination would say that it is the lighbox form code.  Is there a simple way to fix without me being a web developer?    

Can you please try placing the code of the Lightbox Form at the bottom of the page just above the closing body tag?

One line above this: </body>

It seems like a JavaScript conflict because I can also see that the nav element is missing some classes that exist in the other pages.

We use FMG Suites templates and there isn't a way for me to actually put the code where I want.  I have to use it within the templates that I have to use.  I guess I can ask FMG if they can add it at the bottom.  However that doesn't fix my issue if I plan to use a button option in the middle of the page that also opens a lightbox.    

This script 

<script src="https://s3.amazonaws.com/static.contentres.com/site/templates/global/js/leadgen.js?v=2.31.0"></script>

that is found on your page seems to be conflicting with the lightbox script. The conflict is the reason why the page layout dramatically changed. If this script isn't needed on that page, try removing it and see how it goes.

If that's not an option, insert this code in the lightbox script, first line under the second script tag. This should help. 

var $ = jQuery.noConflict(); 

If this creates another issue, make sure to let us know.

That worked.  Thank you very much!