Menu icon Foundation
Dropdown menu not opening on the right side

Hi All,

I have some problems using dropdown menu's and dropdown functionality in general. Below URL the two menu items on the right side (search-icon + NTC) are dropdown menu items. The goal is to have the submenu open on the left relative to the parent. They are now opening to the right. I tried changing this behavior using data-options and the alignnment option. I tried 'left' and 'right', no affect. I am doing something wrong or is this a bug?

Dropdown menu opening on the right side (should be on the left side): http://goo.gl/cpHIF9

Then on this page http://goo.gl/Sljk64 I have a dropdown item called Export (grey button with down arrow). When it's clicked on a big resolution the dropdown opens in the bottom, but big part will apear on the right side of the button, while I would actually like it to overlap on the left side. When making the screen smaller it will even render the menu left of the bottom (next to it, not under it). How can I prevent that behavior?

Nick

dropdown

Hi All,

I have some problems using dropdown menu's and dropdown functionality in general. Below URL the two menu items on the right side (search-icon + NTC) are dropdown menu items. The goal is to have the submenu open on the left relative to the parent. They are now opening to the right. I tried changing this behavior using data-options and the alignnment option. I tried 'left' and 'right', no affect. I am doing something wrong or is this a bug?

Dropdown menu opening on the right side (should be on the left side): http://goo.gl/cpHIF9

Then on this page http://goo.gl/Sljk64 I have a dropdown item called Export (grey button with down arrow). When it's clicked on a big resolution the dropdown opens in the bottom, but big part will apear on the right side of the button, while I would actually like it to overlap on the left side. When making the screen smaller it will even render the menu left of the bottom (next to it, not under it). How can I prevent that behavior?

Nick

Frederick Rogers over 3 years ago

Hi Nick,

it appears your problem is that the dropdown menu is absolutely positioned relative to it's parent. You will have to override this css (which is affecting both the search and the dropdown menu).

.dropdown.menu:not(.vertical) .is-dropdown-submenu.first-sub {
    top: 100%;
    left: 0;
    right: auto;
}

Nick TC over 3 years ago

Great, that resolved the problem!