Начальная загрузка модальной и анимации заголовка

Question

Я использую всплывающее модальное меню Bootstrap, но мне нужно, чтобы мой логотип двигался вправо и рядом с основными меню, когда модальное окно открыто.

Вот мой код, мой вариант, который не работает.

H. Т. М. Л.:

<HEADER class="header-area">
<DIV class="container-fluid h-100">
<DIV class="row h-100 align-items-center">
<DIV class="col-12 h-100">
<DIV class="main-menu h-100">
<NAV class="navbar h-100 navbar-expand-lg stroke">
<DIV class="stories"></DIV>
<A class="navbar-brand" id="navbar-brand" href="/">
<ARTICLE id="preg1"><IMG src="files/img/logo.png" /></ARTICLE>
</A>
<DIV class="collapse navbar-collapse" id="studioMenu">
<UL class="navbar-nav ml-auto">
<LI class="nav-item"><A class="nav-link pt-trigger" data-animation="21" data-goto="1" id="home">HOME</A></LI>
<LI class="nav-item"><A class="nav-link pt-trigger" data-animation="21" data-goto="2" id="portfolio">WORK</A></LI>
<LI class="nav-item"><A class="nav-link pt-trigger" data-animation="21" data-goto="3" id="services">SERVICES</A></LI>
<LI class="nav-item"><A class="nav-link pt-trigger" data-animation="21" data-goto="4" id="blog">BLOG</A></LI>
<LI class="nav-item"><A class="nav-link pt-trigger" data-animation="21" data-goto="5" id="about">ABOUT</A></LI>
<LI class="nav-item"><A class="nav-link pt-trigger" data-animation="21" data-goto="6" id="contact">CONTACT</A></LI>
</UL>
</DIV>
</NAV>
</DIV>
</DIV>
</DIV>
</DIV>
</HEADER>

H. Т. М. Л. № 2:

<DIV class="details" data-active="n">...</DIV>

Приведенный выше DIV находится внутри отдельного файла H. T. M. L., загруженного в основной индексный файл A. J. A. X.

J. S. # 1:

$(".nav-link").click(function(event)
{
    event.preventDefault();
    if($('.details').data("active") == "y")
    {
    $('.details').animate({top: '-=100vh'}, 500, function()
    {
        $("#preg1").animate({"left": "20px"}, 1000);
    });
    $('#close_the_details').fadeOut();
    $("#studioMenu").animate({marginRight: "-=95px"}, 1000);
    $('.details').data("active", "n");
    };
};
$("BODY").on("click", "#close_the_details", function(e) // For the Close button inside the Details panel.
{
    e.preventDefault();
    var dest_left = '20px';
    $('.details').data("active","n");
    $('.details').animate({bottom: '-=100vh'}, 500, function()
    {
    // find the active page if active page is home make logo white
    if( $(".welcome-area .page_wrapper").data("page") == "home")
    {
    $("#preg1 img").attr("src", "img/c_logo/logo.png");
    }
    $("#preg1").animate({"left": dest_left}, 1000);
    $("#studioMenu").animate({ marginRight: "-=95px"}, 1000);
    });
    $('#close_the_details').fadeOut();
    $(".navbar a").css({"color":$('.details').data("backcolor") });
    $(".det-img").attr("src", "");
});
$(".gallery").on("click", ".openBtn", function(e) // This should open Details panel
{
            e.preventDefault();
            var dest_left = $(".logo-container-2").offset().left;
            // console.log(dest_left);
            $("#studioMenu").animate({ marginRight: "+=95px"}, 1000);
            $('.details').data("active","y");
            $('#close_the_details').fadeIn();
            $('.details').animate({
                bottom: '+=100vh'
            }, 500, function()
            {
                $("#preg1").animate({"left": (dest_left-50)});
            });
    });

Этот скрипт # 1 находится внутри основного файла индекса.

J. S. # 2:

(function($) {
    $.loadmodal = function(options) {
        if ($.type(options) == "string") options = {
            url: options
        };
        options = $.extend(true, {
            url: null,
            id: "jquery-loadmodal-js",
            idBody: "jquery-loadmodal-js-body",
            prependToSelector: null,
            appendToSelector: null,
            title: window.document.title || "Dialog",
            width: "400px",
            dlgClass: "fade",
            size: "modal-lg",
            closeButton: true,
            buttons: {},
            modal: {},
            ajax: {
                url: null
            },
            onSuccess: null,
            onCreate: null,
            onShow: null,
            onClose: null
        }, options);
        options.ajax.url = options.ajax.url || options.url;
        if (!options.ajax.url) throw new Error("$().loadmodal requires a url.");
        options.onSuccess = forceFuncArray(options.onSuccess);
        options.onCreate = forceFuncArray(options.onCreate);
        options.onShow = forceFuncArray(options.onShow);
        options.onClose = forceFuncArray(options.onClose);
        $("#" + options.id).modal("hide");
        options.ajax.success = $.isArray(options.ajax.success)? options.ajax.success: options.ajax.success? [options.ajax.success]: [];
        options.ajax.success.unshift(function(data, status, xhr) {
            for (var i = 0; i < options.onSuccess.length; i++) {
                var ret = options.onSuccess[i].apply(null, [data, status,
                    xhr
                ]);
                if (ret === false) return false;
                else if ($.type(ret) === "string") data = ret
            }
            var div = $(['<DIV id="' + options.id + '" class="modal ' + options.dlgClass + ' jquery-loadmodal-js" tabindex="0" role="dialog" aria-labeledby="' + options.id + '-title">', '<DIV class="modal-dialog ' + options.size + '" role="document">', '<DIV class="modal-content">', '<DIV class="modal-header">', options.closeButton? '<BUTTON class="close" data-dismiss="modal" type="button" id="zatvori_detalje"><I class="pe-7s-close" aria-hidden="true"></I></BUTTON><DIV class="logo-container-2"></DIV>':"", '<H4 id="' + options.id + '-title" class="modal-title">' + options.title + "</H4>", "</DIV>", '<DIV id="' + options.idBody + '" class="modal-body">', "</DIV>", "</DIV>", "</DIV>", "</DIV>"
            ].join("\n"));
            if (options.appendToSelector && !options.prependToSelector) $(options.appendToSelector).append(div);
            else $(options.prependToSelector || "body").prepend(div);
            div.find(".modal-body").html(data);
            div.find(".modal-dialog").css("width", options.width);
            if (!$.isEmptyObject(options.buttons)) {
                div.find(".modal-body").append('<DIV class="button-panel"></DIV>');
                var button_class = "btn btn-primary";
                $.each(options.buttons, function(key, func) {
                    var button = $('<BUTTON class="' + button_class + '">' + key + "</BUTTON>");
                    div.find(".button-panel").append(button);
                    button.on("click.button-panel", function(evt) {
                        var closeDialog = true;
                        if (func && func(evt) === false) closeDialog = false;
                        if (closeDialog) div.modal("hide")
                    });
                    button_class = "btn btn-default"
                })
            }
            for (var i = 0; i < options.onCreate.length; i++)
                if (options.onCreate[i].apply(div.get(0), [data, status, xhr]) === false) return false;
            div.on("shown.bs.modal",
                function(event) {
                    if (div.find("[autofocus]").length > 0) div.find("[autofocus]").get(0).focus();
                    else if (div.find(".modal-body").find(":input:enabled:visible").length > 0) div.find(".modal-body").find(":input:enabled:visible").get(0).focus();
                    else if (options.CloseButton) div.find(".close").get(0).focus()
                });
            div.on("shown.bs.modal", function(event) {
                for (var i = 0; i < options.onShow.length; i++) options.onShow[i].apply(div.get(0), [event])
            });
            div.on("hidden.bs.modal", function(event) {
                for (var i = 0; i < options.onClose.length; i++) options.onClose[i].apply(div.get(0), [event]);
                div.removeData();
                div.remove()
            });
            $(".modal-content").imagesLoaded(function() {
                div.modal(options.modal)
            })
        });
        var promise = $.ajax(options.ajax);
        $.extend(promise, {
            create: function(func) {
                options.onCreate.push(func);
                return this
            },
            show: function(func) {
                options.onShow.push(func);
                return this
            },
            close: function(func) {
                options.onClose.push(func);
                return this
            }
        });
        return promise
    };

    function forceFuncArray(ar) {
        if (!ar) return [];
        if ($.isArray(ar)) return ar;
        return [ar]
    }
})(jQuery);

Этот скрипт # 2 является внешним источником.

Этот метод открывает модал (панель «Подробности») и добавляет функциональную кнопку «Закрыть», но при открытом модале он не будет анимировать логотип или основные меню.