Cara Menampilkan Logo Pada Menu Bootstrap

Halo, ketemu lagi dengan saya :). Pada artikel kali ini saya akan menjelaskan bagaimana Cara Menampilkan Logo Pada Menu Bootstrap, biasanya sering kita lihat pada sebuah website kebanyakan memakai logo pada headernya, namun kali ini saya akan menampilkan logo pada bagian menu, ingin tau bagaimana cara membuatnya ? yuk simak langkah-langkahnya berikut ini.

1. Silahkan ketikan kode berikut pada file index.html bootstrap nya:

<nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>                        
                </button>
                <a class="navbar-brand" href="#"><img src="https://www.floridastateparks.org/sites/default/files/logos/instagram_logo.png"></a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li ><a href="#">Home</a></li>
                    <li ><a href="#">Profile</a></li> 
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                </ul>
            </div>
        </div>
	</nav>

2. Kalo sudah coba ketikan lagi kode CSS berikut:

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
  padding-top: 70px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}

.navbar-fixed-top .nav {
    padding: 15px 0;
}

.navbar-fixed-top .navbar-brand {
    padding: 0 15px;
}

@media(min-width:768px) {
    body {
        padding-top: 100px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
    }

    .navbar-fixed-top .navbar-brand {
        padding: 15px 0;
    }
}

3. Setelah itu jangan lupa untuk disimpan, kemudian coba jalankan di browsernya masing-masing dan lihat hasilnya. selesai

Bagaimana, Cukup mudah yah ?

Baik sampai disini artikel mengenai Cara Menampilkan Logo Pada Menu Bootstrap, Semoga bermanfaat, amin.

Selamat Mencoba :).