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.
![](https://kairaweb.com/wp-content/uploads/2019/07/doc-menus-01.png)
Now on each menu item you’ll see you’re ale to add your own custom CSS Class.
![](https://kairaweb.com/wp-content/uploads/2019/07/doc-menus-02.png)
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.