Postingan lainnya

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...

design jquery

@jhonyrain32

196 Kontribusi 192 Poin

Diperbarui 4 tahun yang lalu

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>

@dodipsitorus

412 Kontribusi 145 Poin

Dipost 7 tahun yang lalu



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

@dodipsitorus

412 Kontribusi 145 Poin

Dipost 7 tahun yang lalu

Yang ini gimana solusinya?

@Kodingsakti

1 Kontribusi 0 Poin

Dipost 4 tahun yang lalu