{"id":2640,"date":"2026-10-20T08:35:23","date_gmt":"2026-10-20T07:35:23","guid":{"rendered":"https:\/\/wpgeodirectory.com\/documentation\/article\/dropdown-menu-hides-behind-slider-or-map\/"},"modified":"2026-10-20T08:40:20","modified_gmt":"2026-10-20T07:40:20","slug":"dropdown-menu-hides-behind-slider-or-map","status":"publish","type":"gd_place","link":"https:\/\/wpgeodirectory.com\/documentation\/article\/troubleshooting\/dropdown-menu-hides-behind-slider-or-map\/","title":{"rendered":"Dropdown menu disappears or hides behind a slider or map"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">When a dropdown menu closes as you move the mouse down it, or its lower items can&#8217;t be clicked, something further down the page is sitting on top of the menu. It is usually a slider, a header image or a map. You fix it with CSS by giving the menu a higher z-index than the element covering it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Find the element on top<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the dropdown, right-click an item you can&#8217;t reach and choose Inspect.<\/li>\n\n\n\n<li>If the inspector highlights a slider, map or other container instead of the menu item, that element is on top.<\/li>\n\n\n\n<li>In the Styles panel, note its z-index, and check its parent elements too. Each positioned parent with a z-index creates its own stacking layer, so the number that matters may be on a parent.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Raise the menu<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Add CSS at Appearance > Customize > Additional CSS, or in your child theme&#8217;s style.css. Replace the selector with your theme&#8217;s header or menu container:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">.site-header {\n\tposition: relative;\n\tz-index: 1001;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Use a number above the covering element&#8217;s z-index. If your theme has two menus, such as a top bar and a main menu, give the upper one the higher value, or its dropdowns will slide under the lower menu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">GeoDirectory maps<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Maps that use OpenStreetMap are drawn with Leaflet, which gives its layers and controls z-index values up to 1000. A menu that drops down over one of these maps needs a z-index above 1000.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If the menu belongs to your theme, the theme&#8217;s support team can give you the exact selector to use.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When a dropdown menu closes as you move the mouse down it, or its lower items can&#8217;t be clicked, something further down the page is sitting on top of the menu. It is usually a slider, a header image or a map. You fix it with CSS by giving the menu a higher z-index than [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"article\/tags":[],"article\/categories":[211,437],"class_list":["post-2640","gd_place","type-gd_place","status-publish","hentry","gd_placecategory-tips-tricks-more","gd_placecategory-troubleshooting"],"_links":{"self":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/types\/gd_place"}],"author":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/comments?post=2640"}],"version-history":[{"count":1,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2640\/revisions"}],"predecessor-version":[{"id":2797,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2640\/revisions\/2797"}],"wp:attachment":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/media?parent=2640"}],"wp:term":[{"taxonomy":"gd_place_tags","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/tags?post=2640"},{"taxonomy":"gd_placecategory","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/categories?post=2640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}