Postingan lainnya
Tentang boostrap
Hello saya mau bertanya , saya buat navbar dengan boostrap dan menyembunyikan link navbar di button saat di perkecil tetapi saat saya coba buka di HP , button navbarnya untuk menyembunyikan linknya itu tidak bisa di buka atau di klik tidak ada respon tetapi di laptop bisa , mohon bantuannya terimakasih...
6 Jawaban:
codenya kaya gmn gan.. btw navbar dr bootstrap klo di mobile dia kepakenya kode bagian ini :
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<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="#">My Store</a>
</div>
biasanya ada 2 navbar class, nah yg atasnya itu utk mobile
ane tambahin aja yaa data-target udh bener blm ? ane saranin sih pke #id aja pemanggilannya contoh
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar">
tinggal simpen id="navbar" di class collapse
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="home.php" class="navigation"><i class="glyphicon glyphicon-home"></i> Beranda</a></li>
</ul>
</div>
Jawaban Terpilih
Udah beneer cuman kalau di buka di PC layarnya di pekerkecil dia mau ngumpet ke buttonnya tapi kalau di HP buttonnya nngga bisa di tekan
file jquery sm bootstrap js udh d masukin?
dan file jquery harus terlebih dahulu d masukin..
kayanya itu harus ada navbar-collapse nanti di navbar-header di icon-bar nya ke isi apa aja list dari navbar-nav ane jg msh newbie ginian wkwk
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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="/home">SewaKamar</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li><a href="/home"><span class="glyphicon glyphicon-home"></span> Daftarkan Kamar Anda</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
{{-- navigasi login dan register --}}
@if (Auth::guest())
<li><a href="{{ route('login') }}"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li><a href="{{ route('register') }}"><span class="glyphicon glyphicon-user"></span> Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<img src="{{ asset('/storage/user/' . Auth::user()->image ) }}" alt="image" class="img-circle" style="height:25px; width:25px">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="/users/{{ Auth::user()->id }}">Profile</a>
</li>
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
@endif
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
dan ini tampilannya kaya gini bukan gan mksdnya :
