Horizontal Label Bar Solved!

I have been working on a horizontal label bar for sometime now

I always hit a snag when it came to the display properties but that is now all sorted

To have a similar kind of label bar or navigation bar as the one above first you must modify the header-wrapper id so that it looks like below.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>
</b:section>
<div id='header-right'>
<b:section class='header' id='header-right' showaddelement='yes'>
</b:section>
</div>
</div>

After this then find the header-wrapper code and header code and replace them (red) with the ones below and add the new header-right code as shown below(black)

#header-wrapper {
width: 950px;
border: 1px solid #000000;
margin:0 auto 10px;
border:1px solid $bordercolor;
clear: both;
word-wrap: break-word;
overflow: hidden;
}

#header {
width: 180px;
float: left;
margin: 5px;
border: 1px solid #;
color:$pagetitlecolor;
padding: 5px 5px 5px;
}

#header-right {
width: 700px;
float: right
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header-right ul {
background-position: center;
background: black url(http://kundaistreet.googlepages.com/iddle.gif) center center repeat-x;
padding:7px;
}
#header-right ul li {
display: inline;
padding:2px;
}
#header-right a {
color: #e6e6e6 !important;
}
#header-right a:hover {
color: #FFFFFF !important;
background: transparent url(http://kundaistreet.googlepages.com/active.gif) center center repeat-x;outline:none;
padding:7px;
}

Save the template after inserting the second block of code (!important) and navigate to page elements. Move the labellist widget or your linklist widget to the header bar and save.

Your chosen widget list will now show inline as a horizontal bar