6.2 - Move the Menu
Video Tutorial on How to Move Your Menu to a Different Position
Currently the module displaying my Main Menu is over here on the right and I actually want to display it horizontally underneath my logo. In order to do that I need to know if there is a position available in my template below the logo. So I am going to add that secret URL ?tp=1 and now I can see that there is something called Position-1 which is right below the logo. That looks exactly what I want. So to move the menu go to your administrator select Extensions and Module Manager.
You can see we currently have three modules. Breadcrumbs, Main Menu & Login Form. What we want to edit is Main Menu so let's select that. Here there's a dropdown menu that let's you select the position. Remember we want to use Position-1. Once you've selected that click Save and go back to your web site remove that secret url and refresh. The module has now moved but it doesn't look quite right. It's stacked vertically and I want it go horizontally across the screen.
That's not a problem there's some code we can use to do that. Back in the Module Manager If we go to Options and choose Advanced Options. Here in the Menu Class Suffix we can insert a piece of code that will do what we want. This code is space nav dash pills. It is very important that you put the space at the beginning. Click Save Return to the web site and refresh it. Now we have our menu horizontally across the screen. And as we move between items on the menu they are all highlighted.