Hi,
The behavior of the dropdown in the header on your site is normal for menus using anchors for navigation within the same page. When clicking a menu item, it simply acts as a link within the page, and there is no trigger available to close the dropdown. As a result, the dropdown remains open because the cursor is still hovering over it.
The closing behavior you mentioned in your message is not directly related to the initial click on the menu after loading the page, but is instead tied to the transition of the header from a “non-sticky” to a “sticky” state. The dropdown will close each time you click on it when the header is non-sticky, scroll back to the top of the page, and click again. This behavior is demonstrated in the video: https://monosnap.com/file/incSzVb76eCdkJ295OwCgQVdgc4ydg.
On the other hand, if you click on the menu when the header is already in the “sticky” state, the dropdown will remain open regardless of how many times you click while navigating the page. This is shown in the video: https://monosnap.com/file/jFJ3ReJUXGD2PILftYkkum0oWwVOC5.
From the above, it follows that clicking on the dropdown cannot close it. Instead, the dropdown closes because the header changes its status from “non-sticky” to “sticky,” triggered by the CSS transition of the header from position: absolute to position: fixed. Unfortunately, it is technically impossible to make the dropdown close upon clicking an anchor inside it, even with custom code.
However, it is possible to prevent the dropdown from closing when clicking in a “non-sticky” header. This will provide a consistent anchor navigation experience, regardless of the header’s position.
To achieve this, add the following custom code to the Global Custom CSS area in the Theme Settings:
.whb-sticky-prepared .whb-main-header {
position: fixed;
}
Kind Regards
.
