I have used below jQuery code for stop dropdown going off to the out of the Header. and It is working fine in normal LTR version.
but, I want to solution for RTL version. How can i do it?
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 have try below something But, This is not working
$('.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');
}
});
The right offset is: window's width - ( element left offset + element outer width)
So, I have find final solution:
$('.primary-menu .dropdown-menu').each(function() {
var menu = $('#header .header-row').offset();
var dropdown = $(this).parent().offset();
var rightMenu = ($(window).width() - (menu.left + $('#header .header-row').outerWidth()));
var rightDropdown = ($(window).width() - (dropdown.left + $(this).parent().outerWidth()));
var i = (rightDropdown + $(this).outerWidth()) - (rightMenu + $('#header .header-row').outerWidth());
if (i > 0) {
$(this).css('margin-right', '-' + (i) + 'px');
}
});