JS Uzmanları Konuya (Ücretli Destek)

Merhaba
Mega menü ile ilgili bir çalışma yaptırdım fakat menü üzerine geldiğinde menüye göre kayma yapıyor.

    let eduVibeMegaMenu = function() {
        if ( "rtl" == document.dir ) {
            $( '.main-navigation ul > li.mega-menu' ).each(function() {
                let items       = $(this).find( ' > ul.eduvibe-dropdown-menu > li' ).length,
                bodyWidth       = $( 'body' ).outerWidth(),
                parentLinkWidth = $(this).find( ' > a' ).outerWidth(),
                parentLinkpos   = $(this).find( ' > a' ).offset().left,
                width           = 1100,
                left            = width / 2 - 500 - parentLinkWidth / 2,
                linkleftWidth   = parentLinkpos + parentLinkWidth / 2,
                linkRightWidth  = bodyWidth - (parentLinkpos + parentLinkWidth);

                if (width / 2 > linkleftWidth) {
                    $(this).find( ' > ul.eduvibe-dropdown-menu' ).css( {
                        width: width + 'px',
                        right: 'inherit',
                        left: '-' + parentLinkpos + 'px'
                    } );
                } else if (width / 2 > linkRightWidth) {
                    $(this).find( ' > ul.eduvibe-dropdown-menu' ).css( {
                        width: width + 'px',
                        left: 'inherit',
                        right: '-' + linkRightWidth + 'px'
                    } );
                } else {
                    $(this).find( ' > ul.eduvibe-dropdown-menu' ).css( {
                        width: width + 'px',
                        right: '-' + left + 'px'
                    } );
                }
            } );
        } else {
            $( '.main-navigation ul > li.mega-menu' ).each(function() {
                let items       = $(this).find( ' > ul.eduvibe-dropdown-menu > li' ).length,
                bodyWidth       = $( 'body' ).outerWidth(),
                parentLinkWidth = $(this).find( ' > a' ).outerWidth(),
                parentLinkpos   = $(this).find( ' > a' ).offset().left,
                width           = 1100,
                left            = width / 2 - 100 - parentLinkWidth / 2,
                linkleftWidth   = parentLinkpos + parentLinkWidth / 2,
                linkRightWidth  = bodyWidth - (parentLinkpos + parentLinkWidth);

                if (width / 2 > linkleftWidth) {
                    $(this).find( ' > ul.eduvibe-dropdown-menu' ).css( {
                        width: width + 'px',
                        right: 'inherit',
                        left: '-' + parentLinkpos + 'px'
                    } );
                } else if (width / 2 > linkRightWidth) {
                    $(this).find( ' > ul.eduvibe-dropdown-menu' ).css( {
                        width: width + 'px',
                        left: 'inherit',
                        right: '-' + linkRightWidth + 'px'
                    } );
                } else {
                    $(this).find( ' > ul.eduvibe-dropdown-menu' ).css( {
                        width: width + 'px',
                        left: '-' + left + 'px'
                    } );
                }
            } );
        }
    }

Site adresi : Hesaplama

Ücretli destek istediğim konu ise ben mega menümün sabit şekilde açılmasını istiyorum..

Örnek Site : Hesaplama

Eğer ki bunu çözecek arkadaş olursa bana ulaşırsa çok sevinirim.

left = width / 2 - 500 - parentLinkWidth / 2,

Left değeri dinamik olarak ayarlanmış. Bunu statik bir değer ile değiştirirseniz dilediğiniz olur sanırım.

Hocam oraya ne değer girersem gireyim script çalışmıyor bu sefer daha farklı bir sorun bu.
Oraya 600 giriyorum çalışmıyor.

@Quack; Kodu alt kısıma ekliyorum..
CSS :

/**
* -------------------
* ## Mega Menu
* -------------------
*/

.eduvibe-header-area ul.eduvibe-navbar-nav li.mega-menu > ul {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden; /* Prevent content overflow */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Sönük gölge */
    border-radius: 8px; /* Kenar yuvarlatma */
    padding: 10px; /* İç içe kutu boşluğu */
}


.eduvibe-header-area ul.eduvibe-navbar-nav li.mega-menu > ul.eduvibe-dropdown-menu > li {
    display: block;
    margin: 0;
    width: 25%;
    border: none;
    font-size: 12px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    position: relative;
}


.eduvibe-header-area ul.eduvibe-navbar-nav li.mega-menu > ul.eduvibe-dropdown-menu > li:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;

}

.eduvibe-header-area ul.eduvibe-navbar-nav li.mega-menu > ul.eduvibe-dropdown-menu > li:hover {
    background-color: #c5c7ff;
        overflow: hidden;
}

.eduvibe-header-area ul.eduvibe-navbar-nav li.mega-menu > ul.eduvibe-dropdown-menu > li:hover:before {
    background-color: #ff6601;
}




.eduvibe-header-area ul.eduvibe-navbar-nav li.mega-menu>ul.eduvibe-dropdown-menu>li>a {
    border-bottom: 0.5px solid #ffffff;
    border-radius: 0;
    font-size: 14px;
    line-height: 2;
}

.eduvibe-header-area ul.eduvibe-navbar-nav li.mega-menu.hide-header>ul.eduvibe-dropdown-menu>li>a,
.eduvibe-header-area .eduvibe-mobile-menu-nav-wrapper li.mega-menu.hide-header>ul>li>a,
.eduvibe-header-area .eduvibe-mobile-menu-nav-wrapper .metismenu li.mega-menu.hide-header .sub-menu.mm-collapse {
    display: none;
}

.eduvibe-header-area .eduvibe-mobile-menu-nav-wrapper li.mega-menu.hide-header>ul {
    padding-left: 0;
}

.eduvibe-header-area .eduvibe-mobile-menu-nav-wrapper .metismenu li.mega-menu.hide-header.mm-active .sub-menu.mm-collapse,
.eduvibe-header-area .eduvibe-mobile-menu-nav-wrapper .metismenu li.mega-menu.hide-header.mm-active .sub-menu.mm-collapse:not(.mm-show) {
    display: block;
}

.eduvibe-header-area ul.eduvibe-navbar-nav li.mega-menu>ul.eduvibe-dropdown-menu>li>a:hover {
    color: #272727;
    background-color: inherit;
}

.eduvibe-header-area ul.eduvibe-navbar-nav li.mega-menu>ul.eduvibe-dropdown-menu>li ul {
    position: relative;
    width: 100%;
    left: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: inherit;
    padding-top: 10px;
    padding-bottom: 10px;
}

.eduvibe-header-area ul.eduvibe-navbar-nav li.mega-menu>ul.eduvibe-dropdown-menu>li ul li {
    padding: 0;
}

.eduvibe-header-area ul.eduvibe-navbar-nav li.mega-menu:hover ul {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}


/**

JS :

    let eduVibeMegaMenu = function() {
        if ( "rtl" == document.dir ) {
            $( '.main-navigation ul > li.mega-menu' ).each(function() {
                let items       = $(this).find( ' > ul.eduvibe-dropdown-menu > li' ).length,
                bodyWidth       = $( 'body' ).outerWidth(),
                parentLinkWidth = $(this).find( ' > a' ).outerWidth(),
                parentLinkpos   = $(this).find( ' > a' ).offset().left,
                width           = 1100,
                left            = width / 2 - 500 - parentLinkWidth / 2,
                linkleftWidth   = parentLinkpos + parentLinkWidth / 2,
                linkRightWidth  = bodyWidth - (parentLinkpos + parentLinkWidth);

                if (width / 2 > linkleftWidth) {
                    $(this).find( ' > ul.eduvibe-dropdown-menu' ).css( {
                        width: width + 'px',
                        right: 'inherit',
                        left: '-' + parentLinkpos + 'px'
                    } );
                } else if (width / 2 > linkRightWidth) {
                    $(this).find( ' > ul.eduvibe-dropdown-menu' ).css( {
                        width: width + 'px',
                        left: 'inherit',
                        right: '-' + linkRightWidth + 'px'
                    } );
                } else {
                    $(this).find( ' > ul.eduvibe-dropdown-menu' ).css( {
                        width: width + 'px',
                        right: '-' + left + 'px'
                    } );
                }
            } );
        } else {
            $( '.main-navigation ul > li.mega-menu' ).each(function() {
                let items       = $(this).find( ' > ul.eduvibe-dropdown-menu > li' ).length,
                bodyWidth       = $( 'body' ).outerWidth(),
                parentLinkWidth = $(this).find( ' > a' ).outerWidth(),
                parentLinkpos   = $(this).find( ' > a' ).offset().left,
                width           = 1100,
                left            = width / 2 - 100 - parentLinkWidth / 2,
                linkleftWidth   = parentLinkpos + parentLinkWidth / 2,
                linkRightWidth  = bodyWidth - (parentLinkpos + parentLinkWidth);

                if (width / 2 > linkleftWidth) {
                    $(this).find( ' > ul.eduvibe-dropdown-menu' ).css( {
                        width: width + 'px',
                        right: 'inherit',
                        left: '-' + parentLinkpos + 'px'
                    } );
                } else if (width / 2 > linkRightWidth) {
                    $(this).find( ' > ul.eduvibe-dropdown-menu' ).css( {
                        width: width + 'px',
                        left: 'inherit',
                        right: '-' + linkRightWidth + 'px'
                    } );
                } else {
                    $(this).find( ' > ul.eduvibe-dropdown-menu' ).css( {
                        width: width + 'px',
                        left: '-' + left + 'px'
                    } );
                }
            } );
        }
    }

Çözersen istenilen şekilde bir yemek benden sana