Custom Header Navigation & NavBar Removal in Blogger

First I'll start off with the NavBar removal. Go to your Dashboard > Layout > Edit HTML and add the following code underneath your template author info:
#navbar-iframe {
display: none !important;
}


Now, for the custom header navigation you will need to scroll pretty far down to:
div id="content wrapper">
Change maxwidgets='4' and showaddelement='yes'


Scroll down to the /* ---( header and site name ) --- */ section and paste the following:
#newnavbar {
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:0px;
border:0px solid;
}

#newnavbar a {
text-decoration: none;
color: $pagetitlecolor;
}

#newnavbar a:hover {
color: #eee;
}


Save Template

Now go to Page Elements > Add a Gadget > HTML/Javascript and modify the following html:


Last, rearrange your new HTML/Javascript widget under your header:


Note: My Header banner has been modified to be slightly taller. I had to add two navbar widgets to push my navigation links down further so that is wasn't at the top of the banner.