Henry Rotering

First, using an unordered list would be better for your navigation. Not only it is more accessible, the code is cleaner, it is better for search engines and WayFinder likes it more too. We want to take out the image reference and other attributes as we will take care of that with css. We will also add live text to the navigation for search engines and screen readers. So your HTML would be something like this: <ul id="menu_area"> <li id="home_link"><a href="index.html">Home</a></li> <li id="flavours_link"><a href="flavours.html">Flavours</a></li> <li id="gallery_link"><a href="gallery.html">Gallery</a></li> <li id="logo_area"> <a href="index.html">Logo</a></li> <li id="contact_link"><a href="contact.html">Contact</a></li> <li id="blog_link"><a href="blog.html">Blog</a></li> </ul> Now we want to add that css to make your navigation look AWESOME. In the code above i changed all your classes to IDs // this is so we can define the image and width using CSS your new CSS will be something along the lines of: @charset "UTF-8"; /* CSS Document */ #menu_area { padding:0px; margin:0px; list-style : none; display:inline; overflow : hidden; } #menu_area li { display:inline; list-style:none; } #menu_area a { float : left; display : inline; padding : 77px 0 0 0; border : none; outline : none; overflow : hidden; height : 0 !important ; height /**/:77px; /* for IE5/Win only */ } #menu_area a:hover, #menu_area a.hover { background-position : 0 -77px; } #home_link a { width : 66px; background : url(images/home_replace.png) no-repeat top left; } #flavours_link a { width : 67px; background : url(images/flavours_hover.png) no-repeat top left; } #gallery_link a { width : 74px; background : url(images/gallery_hover.png) no-repeat top left; } #logo_area a { width : 458px; background : url(images/logo.png) no-repeat top left; } #contact_link a { width : 73px; background : url(images/contact_hover.png) no-repeat top left; } #blog_link a { width : 60px; background : url(images/blog_hover.png) no-repeat top left; } after that you just need to make your WayFinder Call and Chunks which will be fairly simple as it doesnt look like you will have any dropdowns. Wayfinder Call: <ul id="menu_area" [[Wayfinder? &startId=`0` &level=`1` &parentRowTpl=`wf_parentRow`]] </ul> You will only need to create one chunk "wf_parentRow". This is the template Wayfinder will use to output your list. You want to set it up like your hardcoded HTML but with placeholders for your content. <li id="[[+alias+]]"><a href="[[~[[+id+]]~]]">[[+pagetitle+]]</a></li> OR, you could just hardcode the navigation. I think that is it...anyone else?