https://designwanted.com/wp-content/themes/designwanted/js/submenu-alignment.js

1/**
2 * Submenu Alignment Script
3 * Ensures submenu content starts directly below parent menu item
4 * with background flush left and covering full width
5 */
6(function($) {
7    'use strict';
8
9    // Function to position submenus
10    function positionSubmenus() {
11        $('.header .desktop-menu > li.has-submenu').each(function() {
12            var $parentItem = $(this);
13            var $submenu = $parentItem.find('.submenu');
14            var $submenuContainer = $submenu.find('.submenu-container');
15            
16            if ($submenu.length && $submenuContainer.length) {
17                // Get parent item's position and width
18                var parentOffset = $parentItem.offset();
19                var parentWidth = $parentItem.outerWidth();
20                var parentCenter = parentOffset.left + (parentWidth / 2);
21                var headerHeight = $('.header').outerHeight();
22                
23                // Set submenu position to be fixed at the correct vertical position
24                // This ensures it's flush with the left edge and covers full width
25                $submenu.css({
26                    'position': 'fixed',
27                    'top': headerHeight + 'px',
28                    'left': '0',
29                    'right': '0',
30                    'width': '100%',
31                    'transform': 'none'
32                });
33                
34                // Position the submenu container to align below parent
35                // Calculate the offset to align the submenu container with the parent menu item
36                var parentLeft = parentOffset.left;
37                
38                // Set the submenu container position to align with parent menu item
39                $submenuContainer.css({
40                    'margin': '0 !important',
41                    'position': 'relative',
42                    'left': parentLeft + 'px',
43                    'transform': 'none'
44                });
45            }
46        });
47    }
48
49    // Run on document ready
50    $(document).ready(function() {
51        positionSubmenus();
52        
53        // Reposition on window resize
54        $(window).on('resize', function() {
55            positionSubmenus();
56        });
57        
58        // Handle hover events to reposition when needed
59        $('.header .desktop-menu > li.has-submenu').on('mouseenter', function() {
60            positionSubmenus();
61        });
62    });
63
64})(jQuery);