Cara Membuat Menu Slide Dibawah Header
Cara Membuat Menu Slide Dibawah Header - Kesempatan kali ini saya akan berbagi tutorial tentang Cara Membuat Menu Slide Dibawah Header yang mana telah saya terapkan di template - template viomagz yang sudah saya redesign jika sahabat blogger ingin melihat nya silahkan klik link Demo dibawah ini.
Cara Membuat Menu Slide Dibawah Header
1. Silahkan sahabat login di blogger
2. Kemudian " Edit Template " dan cari kode ]]></b:skin> kemudian Pastekan kode dibawah ini tepat diatasnya
Baca juga :
2. Kemudian " Edit Template " dan cari kode ]]></b:skin> kemudian Pastekan kode dibawah ini tepat diatasnya
Baca juga :
/*-- Menu Geser Kesamping --*/
.second-menu{left:0;right:0;top:48px;display:none;max-width:100%;overflow:scroll;overflow-y:hidden;position:fixed;z-index:5;background:#fff;height:35px;line-height:12.5px;font-size:13.5px;font-weight:500;box-shadow:0 2px 6px 0 rgba(0,0,0,.1)}
.second-menu ul{width:max-content;margin:0 0 0 0px}
.second-menu ul li{float:left;font-size: 12px;padding:6px 8px;display:block;text-align:center;text-transform:uppercase}
.second-menu ul li a:hover{color:#0990de;border-bottom:2px solid #0990de}
.second-menu ul li a{color:#444;padding: 8px 5px;}
.second-menu ul li.satu1 {padding: 0;position:fixed;left:-1px}
@media screen and (max-width: 640px){
.second-menu{display:block}
}3. Kemudian cari kode </header></div> dan pastekan kode dibawah ini dibawah kode diatas
<div class='second-menu'>
<ul>
<li><a href='#' title='Label 1'>Label 1</a></li>
<li><a href='#' title='Label 2'>Label 2</a></li>
<li><a href='#' title='Label 3'>Label 3</a></li>
<li><a href='#' title='Label 4'>Label 4</a></li>
<li><a href='#' title='Label 5'>Label 5</a></li>
</ul>
</div> 4. Cari kode CSS dibawah ini
@media only screen and (max-width:640px) {
#wrapper {
padding: 70px 15px 15px;
}Kemudian ganti dengan kode CSS dibawah ini
@media only screen and (max-width:640px) {
#wrapper {
padding: 100px 15px 15px;
}Info! Menu slide dibawah header ini hanya berfungsi pada tampilan Mobile saja
Penutup
Nah begitulah cara membuat menu slide dibawah header yang dapat saya bagikan kali ini semoga dapat mempercantik tampilan blogger kalian, trimakasih
2 komentar