Daftar dan Belajar Sekarang!

Bootstrap Navbar

foto suhen
40 Kontribusi 2 Coto
2 tahun yang lalu
http://codepen.io/anon/pen/YZQVyX Gan, saat media nya mobile, otomatis menu nge-group dalam kotak, nah saat diklik muncul dropdown menu, masalahnya kata "Hello World!" dibawahnya ikutan kebawah harusnya tetap pada posisi dan ketutup dropdown menu. Gimana cara nya agar tulisan itu ada diposisi aslinya. Terima kasih.

Tag: html css mobile

✔ Forum ini sudah terjawab


Jawaban
foto Dodi Sitorus
412 Kontribusi 144 Coto
2 tahun yang lalu
Cobaa yang ini gann...
<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Bootstrap theme</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse in" aria-expanded="true">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </nav>
      <div class="container theme-showcase" role="main">

      <!-- Main jumbotron for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Theme example</h1>
        <p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
      </div>
answered icon
foto afrijaldz
212 Kontribusi 78 Coto
2 tahun yang lalu
kayaknya emang harusnya gitu deh mas, :"D

foto Dodi Sitorus
412 Kontribusi 144 Coto
2 tahun yang lalu
Ituu udah bawaan dari bootstrap nya gannn... hehheh

foto suhen
40 Kontribusi 2 Coto
2 tahun yang lalu
Coba cek ini gan theme dari bootstrap nya sendiri http://getbootstrap.com/examples/theme/ Ketika menu dropdown turun, konten dibawah navbar gak ikut turun, tetap pada posisinya

foto Dodi Sitorus
412 Kontribusi 144 Coto
2 tahun yang lalu
Nahhh ituu bisa... perlu settingan tambahan di kode nya lagi, ya jangan berharap dri bootstrap nya aja gan..

foto suhen
40 Kontribusi 2 Coto
2 tahun yang lalu
Tambahin class navbar-fixed-top gan, tapi konten nya jadi 0 top nya, biar turun sejajar setelah navbar gmn ya??? apa ada class tambahan klo pake navbar-fixed-top supaya konten gak 0 top nya?

foto Dodi Sitorus
412 Kontribusi 144 Coto
2 tahun yang lalu
Cobaa yang ini gann...
<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Bootstrap theme</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse in" aria-expanded="true">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </nav>
      <div class="container theme-showcase" role="main">

      <!-- Main jumbotron for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Theme example</h1>
        <p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
      </div>

foto Dodi Sitorus
412 Kontribusi 144 Coto
2 tahun yang lalu
Sebenarnya belajar bootstrap itu bagaikan konsumsi narkoba gan ketergantungan, jika kita belum memahami betul tentang CSS dan CSS3 gann... pelajari dulu baik2 tentang CSS atau CSS3..

foto suhen
40 Kontribusi 2 Coto
2 tahun yang lalu
@Dodi123, siap gan ane belajar-nya kejar tayang T.T , dpt lagi ilmu dah... makasih gan


Login untuk diksusi di forum sekolah koding