JSFiddle - React, Tailwind, and code Playground
by Nilambar Sharma
HTML
<div id="container">
<header role="banner" class="site-header" id="masthead">
<div class="header-image-wrapper">
<img width="1140" height="152" alt="" src="http://nilambar.com.np/blue-planet/wp-content/uploads/2014/02/cropped-Desert.jpg" id="bs-header-image">
<div class="site-branding">
<div class="site-info">
<h1 class="site-title">
<a rel="home" href="http://nilambar.com.np/blue-planet/">Blue Planet</a>
</h1>
<h2 class="site-description">Demo of Blue Planet</h2>
</div>
</div>
</div>
</header>
<nav id="site-navigation" class="blueplanet-nav" role="navigation">
<div class="menu-main-menu-container"><ul class="nav-menu" id="menu-top"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4" id="menu-item-4"><a href="http://nilambar.com.np/blue-planet/">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24" id="menu-item-24"><a href="http://nilambar.com.np/blue-planet/pages/sample-page/">Sample Page</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19" id="menu-item-19"><a href="http://nilambar.com.np/blue-planet/contact-us/">Contact Us</a></li>
</ul></div>
</nav>
</div>
CSS
#container{
width:960px;
height:auto;
overflow:hidden;
}
header#masthead{
background-color: #00ADB3;
}
header#masthead .header-image-wrapper{
width:100%;
}
header#masthead div.site-branding{
position: relative;
width: 100%;
}
header#masthead img {
left: 0;
position: inherit;
top: 0;
z-index: 99999;
}
header#masthead > nav{
border-radius: 0px;
border: none;
margin:0px;
padding:0px;
position:relative;
}