Card image cap
[Website Design][1] Mobile Side Navbar Bootstrap 4
Tuesday, 05 Mar 2019

Hello world,

Kali ini saya akan melebarkan pembahasan ke materi lain yaitu apa saja yang dapat kita lakukan untuk membuat tampilan custom dari Bootstrap 4. Bootstrap merupakan framework untuk website design yang sudah sangat banyak penggunanya. Berdasarkan data dari trends.builtwith.com, total pengguna Bootstrap mencapai 17,884,534 website pada 2019/01. Sebagian diantaranya sudah mampu memodifikasi tampilan sedemikian rupa hingga sesuai dengan keinginan. Nah di sini saya akan mencoba berbagi desain-desain custom yang pernah saya buat menggunakan Bootstrap 4. 

Contoh kali ini cukup sederhana yaitu membuat navbar versi SideNavbar saat dibuka di mobile. Kode awal yang saya digunakan adalah contoh dari navbar bootstrap 4 yang bisa dicopy di sini https://getbootstrap.com/docs/4.3/components/navbar/. Versi yang saya buat adalah versi navbar yang jika diklik toggle button-nya maka akan memunculkan list menu secara perlahan dari kiri ke kanan seperti sidebar pada aplikasi-aplikasi Android. Nah setelah mencoba ngulik dan mencari referensi dari forum-forum akhirnya jadilah css yang sesuai dengan yang saya inginkan seperti contoh di bawah. Jika kalian sudah membuat file html yang berisi navbar, silakan tambahkan css di bawah ini pada file html kalian.

             @media (max-width: 992px) {
                .navbar-collapse {
                    background: #f5f5f5;
                    position: absolute;
                    top: 54px;
                    left: -300px;
                    padding-left: 15px;
                    padding-right: 15px;
                    padding-bottom: 15px;
                    width: 300px;
                    height: 100vh !important;
                    transition: all 0.3s ease;
                    display: block;
                }
                .navbar-collapse.collapsing {
                    height: 100vh;
                    margin-right: 50%;
                    transition: all 0.3s ease;
                    display: block;
                }
                .navbar-collapse.show {
                    left: 0;
                }
            }

Pada contoh yang saya buat di atas saya gunakan @media max-width: 990px yang artinya kode css yang ada di dalamnya akan berfungsi pada saat website dibuka di mobile (tablet dan hp). 

Full Code



Selamat mencoba :)