Left-Side Menu Dropdowns

By default all sub-dropdown items on the main menu open to the right, however, if you have dropdowns on the far right this could cause them to go off the screen which isn’t good. For this reason Total has a few useful classes to make items open to the left instead of the right.

left-dropdowns class

This classname can be added to any menu item that has dropdowns to open it’s sub-dropdowns to the left.

left-drops

Result

left-dropdowns

flip-drops-smallscreen class

This classname can be added to any menu item that has dropdowns to open it’s sub-dropdowns to the left but only for screens between 768px – 1280px. This is great if you need your dropdowns to switch only for small desktops and landscape tablets.

flip-drops-smallscreens

 

Open All Dropdowns to the left by default

This can be done with a little custom CSS, example:

#site-navigation .dropdown-menu li ul ul { left: auto; right: 100%; }
body #site-navigation .sf-menu li ul a.sf-with-ul { padding-left: 25px; padding-right: 12px; }
#site-navigation .dropdown-menu li ul .fa-angle-right { left: 9px; right: auto; }
#site-navigation .dropdown-menu li ul .fa-angle-right:before { content: "\f104" }

Adding CSS To My Site