Documentation

In the WordPress themes, we create a simple CSS method of switching the direction for the Main Navigation drop down menus, this can be done as top level so that all the sub-menus below will switch direction, or it can be done to switch the chosen sub-menu.

It’s as simple as adding a custom CSS class to the navigation areas.

To add custom CSS classes to your navigation items you need to navigate to Appearance -> Menus in your WordPress Dashboard.

At the top right corner you can open a section called Screen Options… Open it and then you’ll see you can turn on CSS classes.

Now on each menu item you’ll see you’re ale to add your own custom CSS Class.

There are 3 different classes you can add according to how you want to switch the menu level directions:

Top Level CSS Class

nav-switch

This CSS class is only for top level elements… It will change the direction of all sub-menu elements below this menu item.

Sub-Level CSS class to change only the one level below

nav-sub-switch

This CSS class will make ONLY the level below it switch direction and the sub-menu levels below that will stay with the normal direction… going to the right.

Sub-Level CSS class to change ALL levels below

nav-sub-switch-all

This CSS class will make ALL the levels below it switch direction and go to the left.