js-tygh-backend-heading.js.diff

diff --git a/js/tygh/backend/heading.js b/js/tygh/backend/heading.js
index 804b3bbec0..9dea47db0c 100644
--- a/js/tygh/backend/heading.js
+++ b/js/tygh/backend/heading.js
@@ -1,35 +1,59 @@
 (function (_, $) {
-    $(document).ready(function () {
+    // Navbar submenu Horizontal position
+    $(_.doc).on('mouseenter', '.navbar-right li, .subnav .nav-pills:not(.mobile-visible) li', function () {
+        let $dropdownMenu = $(this).children('.dropdown-menu');
 
-        if (!$('.navbar-right li').length) {
-            return;
+        if (!$dropdownMenu.length) {
+            return
+        };
+
+        let $navbarAdminTop = $('.admin-content .navbar-admin-top'),
+            addedClass      = $(this).hasClass('dropdown-submenu') ? 'dropdown-menu-to-right' : 'pull-right';
+
+        if (_.language_direction === 'ltr'
+            && ($dropdownMenu.offset().left + $dropdownMenu.width() >= $navbarAdminTop.offset().left + $navbarAdminTop.width())
+            || _.language_direction === 'rtl'
+            && ($dropdownMenu.offset().left <= $navbarAdminTop.offset().left)
+        ) {
+            $dropdownMenu.addClass(addedClass);
         }
+    });
 
-        // Navbar submenu position
-        $(document).on('mouseenter', '.navbar-right li, .subnav .nav-pills:not(.mobile-visible) li', function () {
-            let adminContentWidth = $('.admin-content .navbar-admin-top').width();
-                $dropdownMenu = $(this).children('.dropdown-menu');
-
-            if ($dropdownMenu.length) {
-                let elmLeftPosition = $dropdownMenu.offset().left;
-                    elmPosition = elmLeftPosition + $dropdownMenu.width();
-                    addedСlass = $(this).hasClass('dropdown-submenu') ? 'dropdown-menu-to-right' : 'pull-right';
-
-                if (
-                    (_.language_direction === 'ltr' && (elmPosition > adminContentWidth)) ||
-                    (_.language_direction === 'rtl' && (elmLeftPosition < 0))
-                ) {
-                    $dropdownMenu.addClass(addedСlass);
-                }
-            }
-        });
-
-        $(document).on('mouseleave', '.navbar-right li, .subnav .nav-pills:not(.mobile-visible) li', function () {
-            let toggleClass = $(this).hasClass('dropdown-top-menu-item') || $(this).hasClass('notifications-center__opener-wrapper')
+    $(_.doc).on('mouseleave', '.navbar-right li, .subnav .nav-pills:not(.mobile-visible) li', function () {
+        let $self = $(this),
+            toggleClass = $self.is('.dropdown-top-menu-item, .notifications-center__opener-wrapper')
                 ? 'dropdown-menu-to-right'
                 : 'dropdown-menu-to-right pull-right';
 
-            $(this).children('.dropdown-menu').removeClass(toggleClass);
-        });
+        $self.children('.dropdown-menu').removeClass(toggleClass);
+    });
+
+    // Navbar submenu Vertical position
+    $(_.doc).on('mouseenter', '.navbar-right li.dropdown-submenu', function () {
+        let $self         = $(this),
+            $dropdownMenu = $self.children('.dropdown-menu');
+
+        if (!$dropdownMenu.length) {
+            return
+        };
+
+        const elmOffset = 5;
+
+        let elmHeight          = $dropdownMenu.outerHeight(),
+            elmYPosition       = $dropdownMenu.offset().top + elmHeight,
+            bottomPanelHeight  = $('#bp_bottom_panel').outerHeight() || 0,
+            adminContentHeight = $(window).height() - bottomPanelHeight;
+
+        if (elmYPosition > adminContentHeight) {
+            let top = -elmHeight + elmOffset + $self.height();
+
+            $dropdownMenu.css('top', top + 'px');
+        }
+    });
+
+    $(_.doc).on('mouseleave', '.navbar-right li.dropdown-submenu', function () {
+        $(this)
+            .children('.dropdown-menu')
+            .css('top', '');
     });