@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