Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
cara mengatasi sidebar yang tidak muncul di sebelah kiri pada saat burger nav diklik.
Tombol Burger =>
<nav class="navbar navbar-inverse navbar-fixed-top" style="height: 100%;height:60px;background-color: #272727;">
<div class="container">
<button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<div style="margin: 0 auto;width: 100%;">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4">
<p style="text-align: left;">
</p>
</div>
<div class="col-xs-4 col-sm-4 col-md-4" style="text-align: center;" class="navbar-brand">
<p style="margin-top: 10px;padding-left: 120px;">
<img src="assets/LogoTxt.png" style="width: 60%;" class="img-responsive">
</p>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<p style="text-align: right;margin-top: 2px;">
<img src="assets/cart.png" width="60px;">
</p>
</div>
</div>
</div>
</div>
</nav>
================================================================================= Sidebar yang mau dimunculin ..
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation" style="width: 100%; height: 40px;">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Bootstrap 3
</a>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-home"></i> Home</a>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-folder"></i> Page one</a>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-file-o"></i> Second page</a>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-cog"></i> Third page</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Dropdown heading</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-bank"></i> Page four</a>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-dropbox"></i> Page 5</a>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-twitter"></i> Last page</a>
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
============================================================================== View di Browser :
nah dibagian view nya malah pas diklik burger nav nya layarnya langsung item transparant 100% di browser..
Kira-kira bagaimana solusinya yah gan?? oh ia ini make Bootstrap, mohon pencerahannya...
0
3 Jawaban:
Coba pelajari ini gan.. saya lihatt di punya agan banyak sekali penggunaan style yg salah..
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <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>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
0
<head>
<title>Try</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
0
