CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sahand
Sahand

Reputation: 8360

Failing to create custom button on bootstrap

I'm trying to create a button that looks like a navbar button that collapses and expands a certain div on click. I'm getting the event handling to work as it should, but the button won't turn into the look that I want it to, which is something like this. I've used three <span class="icon-bar"></span> elements, but it doesn't work. Have a look at the codepen. Is the span element icon-bar class dated? How to achieve what I want instead?

EDIT: It's a little hard to see the button but it's there. It's empty, which is the problem.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/base.css">
<div class="container-fluid">
   <div class="row dish-item-view">
      <button type="button" data-toggle="collapse" data-target="#sidebar">
      <span class="sr-only">Toggle Dinner Overview</span>
      <span class="icon-bar"></span>
      <span class="icor-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 sidebar in" id="sidebar">
         <h4>To collapse</h4>
      </div>
   </div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

Upvotes: 2

Views: 52

Answers (1)

maxshuty
maxshuty

Reputation: 10662

The issue you're having is that bootstraps styles all rely off parent elements having certain classes.

I have create this fiddle to demonstrate how you can successfully get the hamburger menu. It's pretty simple if you use bootstraps built in styles. Just create a navbar like this:

<div class="navbar custom-hamburger-menu" role="navigation">
    <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#customHamburgerMenuContent">
             <span class="sr-only">Screen reader title</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
         </button>
    </div>

    <div id="customHamburgerMenuContent" class="navbar-collapse collapse">
        Collapsible content
    </div>
</div>

And then all you have to do is style the .icon-bars like this:

.custom-hamburger-menu .navbar-toggle .icon-bar{ 
    background-color: black;
}

Upvotes: 2

Related Questions