How to put the menu in header

From TomatoCMS Documentation

Issue

In the default template, all widgets are loaded inside a container after the header, therefore the position's top menu will look like:

So, how to put the menu in the header?

How to do

Look at the XML files inside the template directory. Each XML file is used to configure the layout for associated page.
For example, you can customize the content of the core_index_index.xml file to change the layout of homepage.

Widget menu is put inside a container:
// application/templates/default/layouts/core_index_index.xml

<container cols="12">
   <widget module="menu" name="menu" load="php">
      ... widget configurations ...
   </widget>
</container>

TomatoCMS allows you to add the cssClass attribute for both container and widget tag in these XML files. The value of the cssClass attribute then will be used to set for the class attribute of div container.

For example, I set:

<container cols="12" cssClass="w_menu_container">
   <widget module="menu" name="menu" load="php">
      ... widget configurations ...
   </widget>
</container>

Then, if you look view the source of homepage, you will see:

Next, add the class in our skin file:

// skins/default/default/default.css

.w_menu_container { margin-top: -35px; }

And the result look like what we expected: