The Tutorial - Positioning the menus
Scenario: A horizontal menu must be placed inside a horizontal cell (Floating Mode)

Here's how a menu would look if we implemented it without changing any of the default positioning settings:

As you can see, the menus almost look right. Horizontally, they're centered but they are at the top of the page so all we need to do is move them down until they appear right above the dark blue cell.
To do this we're going to use the Vertical Offset parameter found in the Tools->Toolbars Editor->Positioning dialog, as show in this screenshot.

Highlighted in red you will see the settings that we need to adjust.

First of all its the alignment. By selecting the second dot from the first row we're configuring the toolbar to appear horizontally centered and at the very top of the page.

Next, we use the Vertical Offset to push the toolbar downwards. In this case we have chosen an offset of 100 pixels.
This means that the toolbar will appear horizontally centered, just as our HTML content and 100 pixels from the top of the page.

Don't worry if you don't know the exact offset that you need to apply on your particular case. Try with a small value and compile the project. Then, test your settings by viewing the menus on your browser. Either increase or reduce the value you have used and recompile until you obtain the results that you're looking for.


Here's how the menus will look like after applying the above mentioned settings:

 

As we expected, the menus still maintain their horizontal centered position but have been pushed 100 pixels from the top placing them exactly above the dark blue area.


This concludes this tutorial. Click here to return the "Positioning the menus" tutorial index.