How to replace pathway with mainmenu on Joomlashacks Lightfast template

I love the look of then Joomlashack Lightfast template but I thought it would be nicer with a little touch-up. I thought, What this template needs is another menu replacing the ' breadcrumbs pathway' with the 'main menu'? If you follow this tutorial you should get something like the picture below.

For starters in your index.php find the following code:

<?php
require($mosConfig_absolute_path."/templates/js_lightfast/csstabmenus.php");
?>
</head>
<body>
<div id="wrap">
<div id="wrap-inner">
<div class="topbar"><?php mosGetTabMenu('topmenu');?>
<h1><a href="index.php" title="<?php echo $mosConfig_sitename; ?>"><?php echo $mosConfig_sitename; ?></a></h1>
</div>
<div id="headerleader"><?php mosLoadModules ( 'user3',-3 ); ?></div>
<div id="path"><div class="pathleft"><div class="inside"><?php mosPathWay(); ?></div>

And replace it with...NOTE You may need to adjust the path for your own site.

<?php require($mosConfig_absolute_path."/templates/js_lightfast_black/csstabmenus.php");
require($mosConfig_absolute_path."/templates/js_lightfast_black/cssdropmenus.php");
?>
</head>
<body>
<div id="wrap">
<div id="wrap-inner">
<div class="topbar"><?php mosGetTabMenu('topmenu');?>
<h1><a href="index.php" title="<?php echo $mosConfig_sitename; ?>"><?php echo $mosConfig_sitename; ?></a></h1>
</div>
<div id="headerleader"><?php mosLoadModules ( 'user3',-3 ); ?></div>
<div id="path"><div class="pathleft"><div class="inside"><?php mosGetDropMenu('mainmenu');?></div>

At this point you need to make a copy of 'csstabmenus.php' named 'cssdropmenus.php' Then open it in your editor of choice and change to all occurrences of the following:

echo "<div id=\"nav\">"; <-- Change to echo "<div id=\"navdrop\">";

mosGetTabMenu <-- Change to mosGetDropMenu

mosRecurseListMenu <-- Change to mosRecurselistdrop

getParentRow <-- Change to getparentdrop

mosGetLink <-- Change to mosgetdrop

Now add the following css to your base.css

#navdrop{margin-right: 8px;margin-top: 7px;position: absolute;left: 1em;z-index: 500;}
#navdrop ul{list-style: none;margin: 0;padding: 0;}
#navdrop a{float: none;}
#navdrop li{float: left;height: 20px;margin-bottom: 0;margin-left: 4px;margin-right: 4px;margin-top: 0;padding-bottom: 0;padding-left: 5px;padding-right: 0;padding-top: 0;}
#navdrop li a{color: #fff;display: block;float: left;font: bold 11px/20px Tahoma, Arial;height: 20px;padding-bottom: 0px;padding-left: 0px;padding-right: 5px;padding-top: 0px;text-decoration: none;}
div#navdrop li:hover, div#navdrop li.sfhover{background: url(../images/tmenu_over_l.png) no-repeat bottom left;}
div#navdrop li:hover a, div#navdrop li.sfhover a{background: url(../images/tmenu_over_r.png) no-repeat bottom right;color: #3982FF;}
div#navdrop li.active a{background: url(../images/tmenu_active_r.png) no-repeat bottom right;color: #FFF;}
div#navdrop li.active{background: url(../images/tmenu_active_l.png) no-repeat bottom left;}

The last thing you will want to do is replace these two images to make the menus look correct. They are both attached.