Sub menu fly-out direction left/right

Hello @areid85

Currently in desktop view submenu effect is from bottom to top subtle fadein effect and in mobile view menu will be slide down when click on toggle button. May be we have missed something so can you please share reference or screenshot/ clip so that it will make some easier for us to provide you feedback.

Thanks ??

Hi Sujan (@sujanshrestha),

Thanks for your reply. As you can see the flyout menu goes off the screen. How can I make this flyout to the left?

• This reply was modified 4 months, 3 weeks ago by areid85.

Hello @areid85

You can use the following code in additional CSS box in customizer for fix:

#site-navigation ul#primary-menu > li:last-child ul ul {
	right: auto;
	left: -100% !important;
	visibility: hidden;
}
#site-navigation ul#primary-menu > li:last-child ul li:hover ul {
	visibility: visible;
}

Thanks

Hi Sujan,

Thanks very much. That worked. It is not critical but if I wanted to change the direction for all the menus would I simply exclude the li:last child parameter?

Once again, thanks for your help.

Hello @areid85

Yes you can remove the :last-child from the above code to make work for all sub menus. Here is the modified version of the code:

#site-navigation ul#primary-menu > li ul ul {
	right: auto;
	left: -100% !important;
	visibility: hidden;
}
#site-navigation ul#primary-menu > li ul li:hover ul {
	visibility: visible;
}

Thanks