<div id="header">
 
      <?php  if ($c->isEditMode()) { ?>
      <div style="min-height: 80px">
      <?php  } ?>
 
      <div id="menu-wrapper">
         <?php 
         $a = new Area('Header Nav');
         $a->display($c);
         ?>
      </div>
 
      <!--<h1 id="logo"><!--
         --><a href="<?php echo DIR_REL?>/"><?php 
            $block = Block::getByName('My_Site_Name');  
            if( $block && $block->bID ) $block->display();
            else echo SITE;
         ?></a><!--
      --></h1>-->
 
      <?php 
      // we use the "is edit mode" check because, in edit mode, the bottom of the area overlaps the item below it, because
      // we're using absolute positioning. So in edit mode we add a bit of space so everything looks nice.
      ?>
 
      <div class="spacer"></div>
 
      <?php  if ($c->isEditMode()) { ?>
      </div>
 
[\code]
 
You would first need to add the logo image into the images dir of your theme folder
 
and replace the 
 
[code]
<!--<h1 id="logo"><!--
         --><a href="<?php echo DIR_REL?>/"><?php 
            $block = Block::getByName('My_Site_Name');  
            if( $block && $block->bID ) $block->display();
            else echo SITE;
         ?></a><!--
      --></h1>-->