How to disable Fly-out effect from Vertical Menu Bar?

In headway 3, the vertical menu bar at the sidebar no longer list down all its sub-menu items like in Headway 2. But now it has a cool fly-out sub-menu when hover over its main menu items. It works great and save a lot of spaces but there is occasion when sub-menu items still need to be listed down individually to allow direct navigation and quick accessibility.

Unfortunately, there is no direct way to disable the fly-out effect in headway 3 but there is still a workaround. Follow the below steps to do so.

Create Custom Vertical Sub-Menu

1. First, create your vertical menu in your WordPress dashboard.
2. Go to Appearance > Menus, type in a menu name, for e.g. Submenu and click on “Create Menu” to create a menu.
3. In the “Pages” panel, select and check on those pages you want them to appear on sub-menu bar.
4. Click on “Add to Menu “ and the pages will now appear under the menu name you have created previously.
5. Click on the green button “Save Menu” to save.

Create a Block for Sub-Menu in Visual Editor

6. Next, create a widget area block in Visual Editor where you want to place your vertical sub-menu.

(Note: If you are wondering why not a navigation block instead of a widget area block because there is a custom menu widget available in widgets that will help to achieve what we want.)

7. Hover over the widget area block and take note of the widget ID.
8. Go back to WordPress dashboard and click on Apperance > Widgets.
9. Drag the “Custom Menu” to the Widget you have just created in Visual Editor.
10. Make sure you are dragging into the widget which has the same ID as what you have created.
11. In the “Custom Menu” panel, you can leave the title blank and select the menu name which is Submenu and click on “Save” button to save.
12. When you view your page, you will see the sub-menu now appear on your web site but it may look a bit plain and raw. You have to style the sub-menu to give it a sleek look.

Style the Sub-Menu

1. In the Headway visual editor, bring up the Live CSS editor and key in below CSS code.
2. First, remove all the default formatting such as the bullets, indent spacing and underline of the sub-menu by adding the following CSS code.

/*STYLE VERTICAL SUB-MENU*/

#block-31 li.widget ul, li.widget li { list-style:none; margin:10px 0 10px -10px; }

#block-31 li.widget { margin-left:-15px; }

#block-31 li.widget a { text-decoration:none; }

3. Remember to change the block ID to your own block ID.
4. To make the sub-menu more interesting, you can add a hover color while mouse over the individual menu items.

/*CHANGE TEXT COLOR WHEN MOUSE OVER LINKS*/

#block-31 li.widget a:hover { background-color:#b60359; color:#ffffff; padding:5px; }

5. You can even style the sub-menu main menu items and individual list items individually by defining a CSS class.
6. For example, changing the size of the menu and the text of main menu items to uppercase.
7. In addition, change the list items text to normal and add a border below each of them.

/*STYLE THE VERTICAL SUBMENU TITLE INDIVIDUALLY*/

.submenu-title { font-weight:bold; text-transform:uppercase; font-size:13px; padding:10px 0 5px 0; }

.submenu-list { font-weight:normal; text-transform:capitalize; border-bottom:1px solid #eeeeee; padding-bottom:7px; font-size:12px; }

8. After defining the class, go back to WordPress dashboard.
9. Go to Appearance > Menus and add the class name to the individual menu item and list items.
10. The class name must be added to the “CSS classes” in the individual menu items.
11. If it is not available, go to the top right hand corner and click on “Screen Option” to bring down more options.
12. Check on “CSS Classes” and it will immediately show in the option panel.
13. Type in “submenu-title” for the main menu items and “submenu-list” for the individual list items.
14. Once it is done, click on the “save menu” to save.
15. You will see the changes at your website.

There may be other way to disable a fly-out effect for sub-menu but this is one of them so if you have better idea, please your suggestion in the comment.