Cara Membuat Header Blog plus Menu dan Kotak Pencarian Responsive.

KODE-KODE Header Blog plus Navigasi Menu dan Kotak Pencarian Responsive berikut ini diambil dari template demo Iwata Blogger Theme. Kodenya sudah sedikit dimodifikasi sehingga tampilannya menjadi ibarat gambar berikut ini:

Cara membuat header blog plus menu dan kotak pencarian responsive ibarat di atas, tentu saja Anda harus hapus dulu kode-kode header yang ada, lalu pasang kode-kode berikut ini.

KODE CSS:
Copas di atas kode ]]>

body#layout .siteheadersec,body#layout .header {width:100%;height:auto;}
.header{padding:20px 0;position:relative}
.header .cover{display:block;position:absolute;top:0;right:0;bottom:0;left:0}
.header.bg-image{background-size:cover;background-position:center}
.header.bg-image .cover{opacity:.65}
.Header h1 {width:300px}
.siteheadersec{width:33.33%;padding-right:40px;position:absolute;bottom:-16px;left:0}
.site-title{font-size:1.75em;line-height:110%;font-weight:500}
.site-title a{color:#fff}
.site-title a:hover{color:#fff}
.site-description{display:none}
.search-toggle{display:block;font-size:22px;color:rgba(255,255,255,0.7);position:absolute;bottom:-4px;right:0}
.search-toggle:hover,.search-toggle.active{color:#fff;cursor:pointer}
.header-search{background:#fff;border-bottom:1px solid #eee}
.header-search .search-field{display:block;width:100%;margin:0;padding:45px 0;border:none;background:none;font-family:'Open Sans',sans-serif;font-size:1.5em;font-style:italic;position:relative;color:#333}
.header-search .search-field:focus{outline:none}
.main-menu{margin:0 48px 0 33.33%;float:none}
.main-menu li{position:relative}
.main-menu > li{float:left;margin-right:30px}
.main-menu > li > a{display:block;font-weight:400;color:#fff}
.main-menu > li.menu-item-has-children > a{padding-right:14px}
.main-menu > li.menu-item-has-children:after{content:"";display:block;border:4px solid transparent;border-top-color:rgba(255,255,255,0.7);position:absolute;top:50%;margin-top:-2px;right:0}
.main-menu a:hover,.main-menu > li.menu-item-has-children:hover > a,.main-menu .current_menu_item > a,.main-menu .current_page_item > a{color:#fff}
.main-menu > li.menu-item-has-children:hover:after{border-top-color:#fff}
.main-menu ul{position:absolute;z-index:10000;display:block;left:-9999px;padding-top:15px;top:30px;opacity:0;z-index:999;-webkit-transition:opacity .3s ease-in-out,top .3s ease-in-out;-moz-transition:opacity .3s ease-in-out,top .3s ease-in-out;-ms-transition:opacity .3s ease-in-out,top .3s ease-in-out;-o-transition:opacity .3s ease-in-out,top .3s ease-in-out;transition:opacity .3s ease-in-out,top .3s ease-in-out}
.main-menu > li > ul:before{content:"";display:block;position:absolute;z-index:1000;top:1px;left:50%;margin-left:-7px;border:7px solid transparent;border-bottom-color:#222}
.main-menu ul .menu-item-has-children::after{content:"";display:block;border:5px solid transparent;border-left-color:rgba(255,255,255,0.4);position:absolute;z-index:1001;right:10px;top:50%;margin-top:-5px}
.main-menu ul .menu-item-has-children:hover::after{border-left-color:#222;right:-10px}
.main-menu ul li{width:220px;background:#222;text-align:center}
.main-menu ul li:first-child{border-radius:3px 3px 0 0}
.main-menu ul li:last-child{border-radius:0 0 3px 3px}
.main-menu ul a{display:block;padding:20px;line-height:130%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:1px solid rgba(255,255,255,0.075);font-size:1rem;font-style:italic;color:#fff}
.main-menu ul a:hover{color:#0093C2}
.main-menu ul > li:last-child > a{border-bottom-width:0}
.main-menu > li:hover > ul{opacity:1;left:50%;margin-left:-110px;top:20px}
.main-menu ul ul{padding-top:0;top:10px}
.main-menu ul ul li{background:#333}
.main-menu ul ul .menu-item-has-children:hover::after{border-left-color:#333}
.main-menu ul ul ul li{background:#444}
.main-menu ul ul ul .menu-item-has-children:hover::after{border-left-color:#444}
.main-menu ul ul ul ul li{background:#555}
.main-menu ul ul ul ul .menu-item-has-children:hover::after{border-left-color:#555}
.main-menu ul ul ul ul ul li{background:#666}
.main-menu ul ul ul ul ul .menu-item-has-children:hover::after{border-left-color:#666}
.main-menu li > ul > li:hover > ul{opacity:1;top:0;left:220px;margin-left:0}
@media (max-width: 930px) {
.header{padding:40px 0}
.site-title{width:100%;padding-right:64px;position:static}
.main-menu,.search-toggle{display:none}
.nav-toggle{display:block;width:44px;height:44px;border-radius:99px;border:2px solid #fff;position:absolute;top:50%;margin-top:-22px;right:0}
.nav-toggle .bar{width:20px;height:2px;background:#fff;border-radius:1px;position:absolute;left:50%;margin-left:-10px;top:50%;-webkit-transition:opacity .2s linear 0.2s,margin .2s linear 0.2s,-webkit-transform .2s linear 0;-moz-transition:opacity .2s linear 0.2s,margin .2s linear 0.2s,-moz-transform .2s linear 0;-o-transition:opacity .2s linear 0.2s,margin .2s linear 0.2s,-o-transform .2s linear 0;transition:opacity .2s linear 0.2s,margin .2s linear 0.2s,transform .2s linear 0}
.nav-toggle .bar:nth-child(1){margin-top:-7px}
.nav-toggle .bar:nth-child(2){margin-top:-1px}
.nav-toggle .bar:nth-child(3){margin-top:5px}
.nav-toggle:hover{cursor:pointer}
.nav-toggle.active{background:#fff}
.nav-toggle.active .bar{background:#00A0D7;-webkit-transition:opacity .2s linear 0s,margin .2s linear 0s,-webkit-transform .2s linear .2s;-moz-transition:opacity .2s linear 0s,margin .2s linear 0s,-moz-transform .2s linear .2s;-o-transition:opacity .2s linear 0s,margin .2s linear 0s,-o-transform .2s linear .2s;transition:opacity .2s linear 0s,margin .2s linear 0s,transform .2s linear .2s}
.nav-toggle.active .bar:nth-child(1),.nav-toggle.active .bar:nth-child(3){margin-top:-1px}
.nav-toggle.active .bar:nth-child(1){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}
.nav-toggle.active .bar:nth-child(2){-webkit-opacity:0;-moz-opacity:0;opacity:0}
.nav-toggle.active .bar:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}
.nav-toggle:hover{cursor:pointer}
.mobile-menu{padding:35px 7%;position:relative;background:#333}
.mobile-menu li{margin-top:10px}
.mobile-menu > li:first-child{margin-top:0}
.mobile-menu .sub-menu{margin-left:30px}
.mobile-menu a{display:block;padding:10px 0;font-size:1em;color:#888}
.mobile-menu a:hover,.mobile-menu .current-menu-item a{color:#fff}
.mobile-search{position:relative;background:#444}
.mobile-search .search-field{width:93%;padding:35px 60px 35px 7%;margin:0;background:none;border:none;font-family:'Open Sans',sans-serif;font-size:1em;font-style:italic;color:#fff}
.mobile-search .search-field:focus{outline:none}
.mobile-search .search-button{display:block;padding:10px;font-size:22px;color:#999;position:absolute;top:50%;margin-top:-23px;right:7%}
.mobile-search .search-button:hover{cursor:pointer;color:#fff}
}
@media (max-width: 600px) {
.header {padding:25px 0}
.site-title{margin-right:60px;font-size:1.5em}
.nav-toggle{width:40px;height:40px;margin-top:-20px}
.mobile-menu{padding:25px 7%}
.mobile-menu li{margin-top:5px}
.mobile-search .search-field{padding:25px 60px 25px 7%}
}
@media (max-width:320px) {
.site-title{font-size:1.35em;position:relative;left:auto;bottom:-1px}
}
@media print {
.header {display:none!important}
}

KODE HTML:
Copas di bawah isyarat atau di atas isyarat