That example is an extremely well-thought-out layout custom design. So, it's good you were only interested in the logo part of it. The rest of that snazzy flexibility is way too much effort for this theme. If you can duplicate that functionality, you should be designing your own theme and demanding serious cash. But, I digress.
If you can find where the header image is specified (the <img> tag) in the code, add this line after it:
<img src="/myLogoPath/myLogoFile.png" alt="Logo" style="position:absolute;left:0px;top:0px;width:33%;min-width:200px;min-height:150px;">
In theory this should give you a logo on top of the header, which starts out at a full size of 320 pixels wide and will shrink with the header image until 200 pixels wide. Of course, this is an over-simplified example of a solution. You will have to tweak the code to meet your particular circumstances. One possible complication with my example I see already is if the browser width ever causes the header image to drop below the minimum width or height of the logo, then the logo will overlap the navigation menu or vice versa.