Card image cap
[Website Design][2] Mobile Side Nav Bootstrap 4 (versi 2)
Monday, 01 Jul 2019

Hello world,

Melanjutkan postingan sebelumnya yang sudah terlalu lama belum saya lanjutkan yaitu mengenai website desain. Masih sama dengan yang sebelumnya, kali ini pembahasannya adalah tentang bagaimana membuat versi custom navbar bootstrap 4. Seperti pada contoh sebelumya (mobile-side-navbar-bootstrap-4), Contoh kali ini hanya sedikit saya buat versi dengan css yang berbeda. Dengan bentuk list navbar yang sedikit diubah pada saat versi mobile.

Tentu saja masih sama juga dengan contoh sebelumnya, saya mengambil kode awal navbar dari website resminya bootstrap. Bisa dicopy di sini. Kemudian kita tambahkan kode css di bawah ini untuk mengubah stylenya.

    @media (max-width: 992px) {
        .navbar-collapse {
            background: #f5f5f5;
            position: absolute;
            top: 54px;
            left: -300px;
            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;
        }

        .navbar-nav{
            padding: 0;
        }

        .nav-item a{
            border-bottom: 1px solid #cccccc;
            background: #f5f5f5;
            padding: 15px !important;
        }

        .nav-item a:hover{
            background: #cccccc;
            color: #ffffff !important
        }
    }

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 Codenya akan menjadi seperti berikut:


Selamat mencoba :)