body {
position: relative;
}

#logo{
margin-bottom: 34px;
}

#masthead {
display: block;
position: absolute;
top: 94px;
height: 34px;
}

To adjust for whatever height your header is, change the "top" value until you find the right location in your setup.

Note that this CSS example was tested with the demo site, if your site is using different custom CSS, then you may need to make some additional adjustments. If you' d like more precise help than that, please make sure to include a link to the blog you're currently working on.

Now I'm trying to move the nav bar down below the header. Basically I want the top of my blog to look like the Fresh & Clean theme (nav bar, header) while the rest of the site is pure Trinton Lite. Any suggestions on how to accomplish this?

You can actually copy the "Navigation Menu" section from the Fresh and Clean original stylesheet into your Triton Lite theme and add a few adjustments. Here is an example:

#access {
background:#efefef;
border:1px solid #ccc;
border-width:1px 0;
margin:0 auto 1.8em;
padding-left:.9em;
z-index:99;
position:absolute;
width:960px;
top:290px;
}

#access ul {
list-style:none;
margin:0;
padding-left:0;
}

#access li {
float:left;
position:relative;
}

#access li li {
min-width:11em;
width:100%;
}

#access a {
color:#666;
display:block;
font-size:.813em;
line-height:1.75em;
padding:.6em 1em;
text-decoration:none;
text-transform:uppercase;
}

#access a:hover {
background:#e6e6e6;
color:#0099ff;
-webkit-transition:background .2s linear;
-moz-transition:background .2s linear;
-o-transition:background .2s linear;
}

#access ul ul {
box-shadow:0 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow:0 3px 3px rgba(0,0,0,0.2);
display:none;
float:left;
position:absolute;
top:2.3em;
left:0;
z-index:99999;
}

#access ul ul ul {
left:100%;
top:0;
}

#access ul ul a {
background:#e6e6e6;
color:#666;
line-height:2.1em;
padding:.5em .5em .5em 1em;
height:auto;
}

#access li:hover > a,#access ul ul :hover > a {
background:#e6e6e6;
color:#0099ff;
}

#access ul ul a:hover {
background:#e6e6e6;
color:#0099ff;
}

#access ul li:hover > ul {
display:block;
}

#access .current_page_ancestor > a,#access .current_page_item > a,#access .current_page_parent > a,#access .current-menu-ancestor > a,#access .current-menu-item > a,#access .current-menu-parent > a {
color:#0099ff;
}

#access .current_page_ancestor > a:hover,#access .current_page_item > a:hover,#access .current_page_parent > a:hover,#access .current-menu-ancestor > a:hover,#access .current-menu-item > a:hover,#access .current-menu-parent > a:hover {
background:#e6e6e6;
color:#0099ff;
}

#access ul ul a {
border-bottom:none;
}

The adjustments I made were to set the width for "#access" to 960px, add absolute positioning, set a top value to control where it appears, and remove the bottom border for "#access ul ul a" at the end.

You can also adjust the "top" value in "#access" to control how far down the menu appears on the page.

If you have already uploaded a header image on the Appearance → Header page in Triton Lite, you can use this CSS to replace it:

#header-image {
background: url('http://lovefurall.files.wordpress.com/2012/03/lfa.jpg') no-repeat;
width: 920px;
height: 116px;
}

If you don't have a header image setup on the Appearance → Header page, add this CSS to add a background image above the site title and tagline. Adjust the padding top value to add more space:

#logo {
display: block;
background: url('http://lovefurall.files.wordpress.com/2012/03/lfa.jpg') no-repeat;
padding-top: 116px;
}

To replace the site title with a custom header image, try the following CSS. This one will also make it so the header image is linked back to the home page:

#logo h1 a {
display: block;
background: url('http://lovefurall.files.wordpress.com/2012/03/lfa.jpg') no-repeat;
width: 920px;
height: 116px;
text-indent: -9999px;
}

Thanks!!