How to make dropdowns in main nav open right

[adambundy]

What is the proper way to make dropdown menus in the main (desktop) nav open to the right (aligned with their parent item on the left)? They seem to default to left and no amount of changing the walkers will change the class 'opens-left' to right. I notice however that on the demo site, they do open to the right. ?? Thanks for any help.

[urbankid]

Hi @adambundy,

You can update your navigation (assets/scss/modules) Sass with something similar like this, I have not tested it, but let me know the results and good luck!

.top-bar .dropdown.menu > li.opens-left > .is-dropdown-submenu {
left: auto;
right: 0;
}

.top-bar .dropdown.menu .submenu::after {
right: 20%;
left: auto;
}

[adambundy]

@urbankid thanks very much for the response. I have always just forced this back to positioning these left-aligned with CSS, but I cant figure out how to change it in the markup which would be better for flexibility.

Note that the first level LI items (.desktop-menu > li) get the class 'opens-left' assigned to them which makes the dropdown menus go left, but I cant see any way to change that. In the Fdn6 docs, the dropdown menu component has a data-alignment option for left or right, but adding this option to the Foundationpress_Top_Bar_Walker function doesn't seem to do anything.

Im stumped. Any insight? Thanks much @urbankid!

[adambundy]

... @urbankid could this be the answer? http://foundation.zurb.com/forum/posts/38246#comment_33383

Fdn makes all menus in the top-right area go right??

[emptydriptray]

@adambundy I'm having the same problem. The dropdown alignment is apparently controlled by foundation.dropdownMenu.js. You can change the default value (left) via the data-options attribute (http://foundation.zurb.com/sites/docs/javascript.html#configuring-plugins for more info). I have no idea how I can add this attribute in foundationpress though.

Have you found a solution yet (or maybe a better workaround)?

[linuxbastard]

In the latest version of FoundationPress, open library/navigation.php and go to line 21, and add data-alignment="left" to the items_wrap menu option:

if ( ! function_exists( 'foundationpress_top_bar_r' ) ) {
	function foundationpress_top_bar_r() {
		wp_nav_menu( array(
			'container'      => false,
			'menu_class'     => 'dropdown menu',
			'items_wrap'     => '<ul id="%1$s" class="%2$s desktop-menu" data-dropdown-menu data-alignment="left">%3$s</ul>',
			'theme_location' => 'top-bar-r',
			'depth'          => 3,
			'fallback_cb'    => false,
			'walker'         => new Foundationpress_Top_Bar_Walker(),
		));
	}
}

I know it's counter intuitive but it tells the js where the main parent menu is, relative to the sub menu.

Also be aware that depending on where the menu is, the js will still push sub-menus left if there is no more space on the right.

[danzo]

I have a much simpler solution. In library/navigation.php, find the desktop navigation function. In my version it's lines 18-37. Simply add data-alignment="left" to items_wrap like so:

'items_wrap' => '<ul id="%1$s" class="%2$s desktop-menu" data-dropdown-menu data-alignment="left">%3$s</ul>',
I know it's kinda odd that left = right. I think the logic is if the menu items are right aligned, they'll extend to the left and if left aligned, they'll extend to the right.