Belajar Bootstrap – Menampilkan Logo Perusahaan Pada Menu Navigasi

Belajar Bootstrap – Menampilkan Logo Perusahaan Pada Menu Navigasi

Belajar Bootstrap – Menampilkan Logo Perusahaan Pada Menu Navigasi

14 Comments on Belajar Bootstrap – Menampilkan Logo Perusahaan Pada Menu Navigasi

Bootstrap merupakan salah satu framework yang mengumpulkan kode – kode html, css dan JS dalam satu bundle. Fungsi utamanya, yaitu untuk mempermudah kita para developer untuk men-desain tampilan yang responsive. artinya, desain yang kita buat nanti akan tampil rapih ketika dibuka di laptop ataupun perangkat mobile lainnya. cara instalasinya sangat mudah, kita tinggal mengunjungi situs http://getbootstrap.com/ lalu download bootstrap dan pasang di komputer anda dimanapun. saya sendiri lebih senang menyimpannya di folder webserver seperti di folder htdocs buat persiapan kalau nantinya mau dibuat dinamis diracik pakai ramuan php, hehe..

sebagai langkah awal uji coba, saya akan mencoba menampilkan logo perusahaan pada menu navigasi, mengingat logo / gambar tidak tampil sempurna pada tampilan default bootstrap. yang kita butuhkan adalah sebuah logo dengan lebar 50px dan panjang yang bebas sesuai selera, dan akan disesuaikan dengan CSS tambahan.

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;
 }
}

simpan kode CSS ini pada file tersendiri supaya tidak mengobrak – abrik file CSS asli bawaan bootstrap, saya menyimpannya dengan nama file bootply.css yang disimpan didalam folder CSS. Langkah selanjutnya adalah menambahkan file ini kedalam index.html

<link href="css/bootply.css" rel="stylesheet">

Tampilan tag <head> secara keseluruhan adalah seperti ini

 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap 101 Template</title>
 
 <!-- Bootstrap -->
 <link href="css/bootstrap.min.css" rel="stylesheet">
 <link href="css/bootply.css" rel="stylesheet">
 
 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->
 </head>

Lalu kita modifikasi Navbar dengan CSS yang sudah kita deklarasikan sebelumnya

<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="bs-logo.png"></a>
 </div>
 <div class="collapse navbar-collapse" id="myNavbar">
 <ul class="nav navbar-nav">
 <li ><a href="#">Home</a></li>
 <li class="dropdown">
 <a class="dropdown-toggle" data-toggle="dropdown" href="#">Profile<span class="caret"></span></a>
 <!--
 <ul class="dropdown-menu">
 <li><a href="#">Page 1-1</a></li>
 <li><a href="#">Page 1-2</a></li>
 <li><a href="#">Page 1-3</a></li>
 </ul>
 -->
 </li>
 
 <li><a href="#">Page 2</a></li>
 <li><a href="#">Page 3</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>

Coba running di browser, tampilan logo perusahaan akan tampil rampih berdampingan dengan daftar menu yang lainnya. dibawah ini hasil setelah saya coba coding di codepen

See the Pen Bootstrap Logo by chephz (@chephz) on CodePen.

 

Bagi yang ingin melihat code secara keseluruhan silahkan download file jadinya pada link dibawah ini,

Download

 

Thats all, semoga bermanfaat 🙂

 

Referensi :

https://github.com/IronSummitMedia/startbootstrap-logo-nav

http://startbootstrap.com/template-categories/all/

 

About the author:

~

Related Posts

14 Comments

  1. Tuxlin  - June 22, 2015 - 6:36 am
    Reply /

    Waduh koding… Meski ane lulusan komputer, ilmu koding ane sangat payah… baca ini mata jadi berkunang2 😀

    • chephz  - June 24, 2015 - 1:09 am
      Reply /

      bisa aja ni :p

  2. HandRoot  - January 3, 2017 - 6:46 am
    Reply /

    Masih bingung nih Gan… jongkok dulu deh biar gak terlalu bingung hehehe… makasih sudab berbagi

    • chephz  - January 3, 2017 - 9:00 am
      Reply /

      hhaha,, coba diskusikan gan, bingungnya sebelah mana

  3. dwioktavia1510@gmail.com  - February 1, 2017 - 7:07 am
    Reply /

    butuh les privat nih kayanya.
    gua masih kelas 2 SMK belum diajarin bootstrap, tapi ditempat PKL suruh bikin kaya gituan. ?
    butuh pertolongan! ?

    • chephz  - February 6, 2017 - 5:02 am
      Reply /

      kalo bro/sis di bekasi timur, bisa ikut kita sering kumpul oprek koding tiap hari sabtu pagi.. gratis

      • dwioktavia1510@gmail.com  - February 8, 2017 - 3:04 am
        Reply /

        jarak jauh bisa gak? ?
        tempat gua di Malang.

        • chephz  - February 8, 2017 - 4:05 am
          Reply /

          cari domisili terdekat. Programmer biasanya terbuka untuk orang-orang yang mau belajar 🙂

          • dwioktavia1510@gmail.com  - February 8, 2017 - 5:55 am
            /

            oke. thanks bang. ?

      • FarahDyba  - February 23, 2017 - 5:01 am
        Reply /

        Tepat nya dimana?

        • chephz  - February 27, 2017 - 1:19 am
          Reply /

          ga jauh dari tugu asem

  4. Siregar  - March 5, 2017 - 2:03 pm
    Reply /

    Duhh kurang mudeng gan, soalnya baru pemula nih dan ngeblog pun lewat smarthphone gan.

    • chephz  - March 6, 2017 - 1:06 am
      Reply /

      hhehehe.. pelan pelan aja gan

  5. MochammadGilang  - April 1, 2017 - 7:06 pm
    Reply /

    Gan ajarin ane bikin navigasi begituan di blogger. Ane lagi butuh banget nih gan

Leave a comment

Back to Top