I have implemented the jQuery code below to prevent the dropdown from extending beyond the header area. It works perfectly in the normal LTR version.
However, I need a solution for the RTL version. How can I achieve this?
jQuery
$('.primary-menu .dropdown-menu').each(function() {
var menu = $('#header .header-row').offset();
var dropdown = $(this).parent().offset();
var i = (dropdown.left + $(this).outerWidth()) - (menu.left + $('#header .header-row').outerWidth());
if (i > 0) {
$(this).css('margin-left', '-' + (i) + 'px');
}
});
HTML
<header id="header">
<div class="container">
<div class="header-row">
<div class="header-column justify-content-start">
<div class="logo me-3"> ..... </div>
<!-- Primary Navigation
============================== -->
<nav class="primary-menu navbar navbar-expand-lg">
<div id="header-nav" class="collapse navbar-collapse">
<ul class="navbar-nav me-auto">
<li><a href="#">Link</a></li>
<li><a href="#">Link 2</a></li>
<li class="dropdown dropdown-mega"> <a class="dropdown-toggle" href="#">Pages</a>
<ul class="dropdown-menu">
<li>
<div class="dropdown-mega-content">
........
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- Primary Navigation end -->
</div>
</div>
</div>
I attempted the following, but it didn't work
$('.primary-menu .dropdown-menu').each(function() {
var menu = $('#header .header-row').offset();
var dropdown = $(this).parent().offset();
var i = (dropdown.right + $(this).outerWidth()) - (menu.right + $('#header .header-row').outerWidth());
if (i > 0) {
$(this).css('margin-right', '-' + (i) + 'px');
}
});