How To Split Header Column to 2 Columns

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see code like this:

/* Header =================================== */ #header-wrapper { width:900px; margin:0 auto 0px; height:190px; } #header-inner { width:900px; background-position: center; margin-$startSide: auto; margin-$endSide: auto; } #header { margin: 0px; text-align: left; color:$pagetitlecolor; }

3.Replace above code with below code.

/* Header =================================== */ #header-wrapper { width:900px; margin:0 auto 0px; height:190px; } #head-inner { width:600px; background-position: left; margin-left: auto; margin-right: auto; float:left; } #header { margin: 0px; text-align: left; color:#ffcc66; } #r_head{ width:300px; float:left; padding-top:10px; }

4.Now again Scroll down to where you see code like this :

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/> </b:section> </div>

5.Replace above code with below code.

<div id='header-wrapper'> <div id='head-inner'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/> </b:section> </div> <div id='r_head'> <b:section class='header' id='header2' preferred='yes'/> </div> </div>

6.Click on "save Template" and you are done.