WebsiteX5.info - The ultimate guide for Incomedia's WebsiteX5

This technique puts a CSS-menu on the top and uses the WebsiteX5-menu on the left.

First of all, backup any files you are about to change (template.css and index.html)!

Add some lines to the template.css-file which comes with the template you are using. Place them at the bottom of the file (be sure you have the right file. It resides in C:\Program Files\WebSite X5 Evolution\Models\<template name>Ver\<color code>). Of course you use a vertical menu for your site, otherwise you will end up with two horizontal menu's...

The lines to add...

div#topnavigation {
width: 780px;
height: 20px;
float: left;
margin-top: 120px;
color: #ffffff;
}

ul#mainlevel-nav
{
font-family: Tahoma;
list-style: none;
font-weight: bold;
color: #FFFFFF;
}

ul#mainlevel-nav li {
background-image: none;
float: left;
text-align: center;
margin: 0;
font-size: 11px;
line-height: 21px;
}

ul#mainlevel-nav li a {
display: block;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color: #FFFFFF;
background: transparent;
}

ul#mainlevel-nav li a:hover {
background: #ff9900;
}
</div>

Of course you can experiment with the font, colors, sizes, etc...

Then edit the index.html-file and change the lines:

<div id="imSite">
<div id="imHeader">
<h1>[imSiteTitle]</h1>
</div>
<!-- InnerJump_Menu -->

To

<div id="imSite">
<div id="imHeader">
<div id="topnavigation">
<ul id="mainlevel-nav">
<li><a href="<url to page 1>" class="mainlevel-nav" >Page 1</a></li>
<li><a href="<url to page 2>" class="mainlevel-nav" >Page 2</a></li>
<li><a href="<url to page 3>" class="mainlevel-nav" >Page 3</a></li>
<li><a href="<url to page 4>" class="mainlevel-nav" >Page 4</a></li>
</ul>
</div>

<h1>[imSiteTitle]</h1>
</div>
<!-- InnerJump_Menu -->

You might have to change the values of margin-left and margin-top in the css for the div 'topnavigation' to achieve the right position for your top menu.

You can achieve a similar effect by adding texts with hyperlinks to the header-image, but I could not get the desired effect when you hover with the mouse over the menu.

Have fun!