Menu icon Foundation
Center Dropdown Pane on page, not button

Is there a way to center a dropdown pane on the page and relative to it instead of absolutely positioning it on the button click event that triggers the pane? I have a search bar centered responsively in the middle of a page with an advanced filters dropdown, and would like the dropdown to center on the search bar instead of the small advanced filter button.

I could give a relative position on the .dropdown-pane class instead of absolute, but that causes the search bar and buttons to break / get crazy formatting when I do so.

 

http://futures-frontend-sandbox.s3-website-us-east-1.amazonaws.com/welcome.html

Unable to center dropdown pane.

dropdown pane

Is there a way to center a dropdown pane on the page and relative to it instead of absolutely positioning it on the button click event that triggers the pane? I have a search bar centered responsively in the middle of a page with an advanced filters dropdown, and would like the dropdown to center on the search bar instead of the small advanced filter button.

I could give a relative position on the .dropdown-pane class instead of absolute, but that causes the search bar and buttons to break / get crazy formatting when I do so.

 

http://futures-frontend-sandbox.s3-website-us-east-1.amazonaws.com/welcome.html

Unable to center dropdown pane.