I am working on a WordPress website using Elementor and the ElementsKit plugin.
I am trying to fix a dropdown menu that appears misaligned and overlaps with other navigation items.
I added custom CSS to adjust the width and alignment, but the issue still persists.
The dropdown background is also not matching the navigation item width properly.
I have tried adjusting padding, margin, and width properties, but none of them solved the problem. I would appreciate guidance on how to properly align the dropdown menu and fix the background width issue.

/*My CSS:*/ .navbar { position: fixed; top: 0; width: 100%; } ul#menu-header-menu { position: absolute; z-index: 9999; top: auto; } /* misaligned/cut off submenu */ <!--My HTML:--> <header class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-60e531f7" data-id="60e531f7" data-element_type="column" data-e-type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-11ea5488 elementor-widget__width-inherit elementor-absolute elementor-widget elementor-widget-ekit-nav-menu" data-id="11ea5488" data-element_type="widget" data-e-type="widget" data-settings="{&quot;_position&quot;:&quot;absolute&quot;}" data-widget_type="ekit-nav-menu.default"> <div class="elementor-widget-container"> <nav class="ekit-wid-con ekit_menu_responsive_tablet" data-hamburger-icon="" data-hamburger-icon-type="icon" data-responsive-breakpoint="1024"> <button class="elementskit-menu-hamburger elementskit-menu-toggler" type="button" aria-label="hamburger-icon"> <span class="elementskit-menu-hamburger-icon"></span><span class="elementskit-menu-hamburger-icon"></span><span class="elementskit-menu-hamburger-icon"></span> </button> <div id="ekit-megamenu-header-menu" class="elementskit-menu-container elementskit-menu-offcanvas-elements elementskit-navbar-nav-default ekit-nav-menu-one-page-no ekit-nav-dropdown-click" ekit-dom-added="yes"><ul id="menu-header-menu" class="elementskit-navbar-nav elementskit-menu-po-center submenu-click-on-icon"><li id="menu-item-4466" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-4390 current_page_item menu-item-4466 nav-item elementskit-mobile-builder-content active" data-vertical-menu="750px"><a href="https://www.afghanictsolution.com/" class="ekit-menu-nav-link active menu-link">Home</a></li> <li id="menu-item-8110" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8110 nav-item elementskit-mobile-builder-content" data-vertical-menu="750px"><a href="https://www.afghanictsolution.com/promotions/" class="ekit-menu-nav-link menu-link">Promotions</a></li> <li id="menu-item-4977" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4977 nav-item elementskit-mobile-builder-content" data-vertical-menu="750px"><a href="https://www.afghanictsolution.com/about-us-3/" class="ekit-menu-nav-link menu-link">About Us</a></li> <li id="menu-item-5100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-5100 nav-item elementskit-dropdown-has relative_position elementskit-dropdown-menu-default_width elementskit-mobile-builder-content" data-vertical-menu="750px"><a role="button" aria-expanded="false" href="https://www.afghanictsolution.com/our-services/" class="ekit-menu-nav-link ekit-menu-dropdown-toggle menu-link">Our Services<i aria-hidden="true" class="icon icon-down-arrow1 elementskit-submenu-indicator"></i></a> <ul class="elementskit-dropdown elementskit-submenu-panel"> <li id="menu-item-9217" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9217 nav-item elementskit-mobile-builder-content" data-vertical-menu="750px"><a href="https://www.afghanictsolution.com/cybersecurity-solutions/" class=" dropdown-item menu-link">Cybersecurity Solutions</a></li></ul> </li> <li id="menu-item-4769" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4769 nav-item elementskit-mobile-builder-content" data-vertical-menu="750px"><a href="https://www.afghanictsolution.com/our-partners/" class="ekit-menu-nav-link menu-link">Our Partners</a></li> <li id="menu-item-4872" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4872 nav-item elementskit-mobile-builder-content" data-vertical-menu="750px"><a href="https://www.afghanictsolution.com/contact-us-2/" class="ekit-menu-nav-link menu-link">Contact Us</a></li> </ul><div class="elementskit-nav-identity-panel"><a class="elementskit-nav-logo" href="https://www.afghanictsolution.com" target="" rel=""><img src="http://www.afghanictsolution.com/wp-content/uploads/2023/03/AICTS-Logo.png" title="AICTS Logo" alt="AICTS Logo" decoding="async"></a><button class="elementskit-menu-close elementskit-menu-toggler" type="button">X</button></div></div> <div class="elementskit-menu-overlay elementskit-menu-offcanvas-elements elementskit-menu-toggler ekit-nav-menu--overlay"></div> </nav> </div> </div> </div> </header>

Farid Ahmad's user avatar

New contributor

Farid Ahmad is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

The problem you are experiencing is the result of applying position: absolute; to menu-header-menu. You can fix it by deleting that line or replacing absolute with flex.

.navbar { position: fixed; top: 0; width: 100%; } ul#menu-header-menu { position: flex; z-index: 9999; top: auto; } <header class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-60e531f7" data-id="60e531f7" data-element_type="column" data-e-type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-11ea5488 elementor-widget__width-inherit elementor-absolute elementor-widget elementor-widget-ekit-nav-menu" data-id="11ea5488" data-element_type="widget" data-e-type="widget" data-settings="{&quot;_position&quot;:&quot;absolute&quot;}" data-widget_type="ekit-nav-menu.default"> <div class="elementor-widget-container"> <nav class="ekit-wid-con ekit_menu_responsive_tablet" data-hamburger-icon="" data-hamburger-icon-type="icon" data-responsive-breakpoint="1024"> <button class="elementskit-menu-hamburger elementskit-menu-toggler" type="button" aria-label="hamburger-icon"> <span class="elementskit-menu-hamburger-icon"></span><span class="elementskit-menu-hamburger-icon"></span><span class="elementskit-menu-hamburger-icon"></span> </button> <div id="ekit-megamenu-header-menu" class="elementskit-menu-container elementskit-menu-offcanvas-elements elementskit-navbar-nav-default ekit-nav-menu-one-page-no ekit-nav-dropdown-click" ekit-dom-added="yes"><ul id="menu-header-menu" class="elementskit-navbar-nav elementskit-menu-po-center submenu-click-on-icon"><li id="menu-item-4466" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-4390 current_page_item menu-item-4466 nav-item elementskit-mobile-builder-content active" data-vertical-menu="750px"><a href="https://www.afghanictsolution.com/" class="ekit-menu-nav-link active menu-link">Home</a></li> <li id="menu-item-8110" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8110 nav-item elementskit-mobile-builder-content" data-vertical-menu="750px"><a href="https://www.afghanictsolution.com/promotions/" class="ekit-menu-nav-link menu-link">Promotions</a></li> <li id="menu-item-4977" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4977 nav-item elementskit-mobile-builder-content" data-vertical-menu="750px"><a href="https://www.afghanictsolution.com/about-us-3/" class="ekit-menu-nav-link menu-link">About Us</a></li> <li id="menu-item-5100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-5100 nav-item elementskit-dropdown-has relative_position elementskit-dropdown-menu-default_width elementskit-mobile-builder-content" data-vertical-menu="750px"><a role="button" aria-expanded="false" href="https://www.afghanictsolution.com/our-services/" class="ekit-menu-nav-link ekit-menu-dropdown-toggle menu-link">Our Services<i aria-hidden="true" class="icon icon-down-arrow1 elementskit-submenu-indicator"></i></a> <ul class="elementskit-dropdown elementskit-submenu-panel"> <li id="menu-item-9217" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9217 nav-item elementskit-mobile-builder-content" data-vertical-menu="750px"><a href="https://www.afghanictsolution.com/cybersecurity-solutions/" class=" dropdown-item menu-link">Cybersecurity Solutions</a></li></ul> </li> <li id="menu-item-4769" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4769 nav-item elementskit-mobile-builder-content" data-vertical-menu="750px"><a href="https://www.afghanictsolution.com/our-partners/" class="ekit-menu-nav-link menu-link">Our Partners</a></li> <li id="menu-item-4872" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4872 nav-item elementskit-mobile-builder-content" data-vertical-menu="750px"><a href="https://www.afghanictsolution.com/contact-us-2/" class="ekit-menu-nav-link menu-link">Contact Us</a></li> </ul><div class="elementskit-nav-identity-panel"><a class="elementskit-nav-logo" href="https://www.afghanictsolution.com" target="" rel=""><img src="http://www.afghanictsolution.com/wp-content/uploads/2023/03/AICTS-Logo.png" title="AICTS Logo" alt="AICTS Logo" decoding="async"></a><button class="elementskit-menu-close elementskit-menu-toggler" type="button">X</button></div></div> <div class="elementskit-menu-overlay elementskit-menu-offcanvas-elements elementskit-menu-toggler ekit-nav-menu--overlay"></div> </nav> </div> </div> </div> </header>

When using position: absolute; (which is not usually recommended), make sure to assign the element a size and position (especially the latter), otherwise it will not work.

Marce Puente's user avatar

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.