navigation - Adding Menu, Social Media, and custom line into header -

navigation - Adding Menu, Social Media, and custom line into header -

i trying customize header more header on site http://makingmagique.com. love fixed , translucent. love menu next "logo" , social media buttons on right side. bonus points if can figure out how add together custom line @ bottom. ;) thought how this? on 20 twelve wordpress open other themes.

anyone know how customize header this? site http://beyondblessedblog.com.

below relevant pieces of header (i copied them straight makingmagique.com). if aren't already, should familiar browser's developer tools.

html:

<div id="header-container"> <div id="header"> <h1 id="site-title"> ... <!-- title/logo --> </h1> <div id="after-header"> <div class="menu-container" id="primary-menu"> ... <!-- navigation menus --> </div> <div class="search" id="search-1"> ... <!-- search box --> </div> <div id="social"> ... <!-- social links --> </div> </div> <div class="clear"></div> </div> <div class="divider"></div> <!-- colored line @ bottom --> </div>

css:

#header-container { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9); position: fixed; width: 100%; z-index: 10000; } #header { margin: 30px auto 0; width: 1020px; } /* title/logo */ #site-title { float: left; height: 41px; margin-right: 60px; position: relative; width: 265px; z-index: 300; } #after-header { float: left; height: 17px; margin-bottom: 2px; padding-top: 26px; width: 695px; } /* navigation menus */ #primary-menu { display: inline-block; float: left; } /* search box */ #after-header .search { display: inline-block; float: left; line-height: normal; } /* social links */ #social { display: inline-block; float: right; font-size: 13px; line-height: normal; margin: 0; padding: 2px 0 0; text-align: right; } .clear { clear: both; } /* colored line @ bottom */ .divider { background: linear-gradient(to right, #c6e0e5 0%, #ffcdce 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); height: 5px; position: relative; width: 100%; z-index: 200; }

p.s. menu animations , hover states another kettle of fish.

menu navigation