Link to home
Create AccountLog in
Avatar of codelevel
codelevel

asked on

menu icon

how to replace 3 icon bars into X mark on toggle collapse?

 <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>      

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

Open in new window

Avatar of Marco Gasi
Marco Gasi
Flag of Spain image

Do you want 3 X instead of 3 horizontal lines? XXX? Remove the calss form span elements and put there your Xs:
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span>X</span>
        <span>X</span>
        <span>X</span>                        
      </button>

Open in new window

or
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span>XXX</span>
      </button

Open in new window

Avatar of codelevel
codelevel

ASKER

i am asking functionality to switch from menu icon to x icon when its collapsed. how would i plug in your code into my code? can you please integrate your solution into my html file?
when the three dash menu is clicked it should toggle to x. thats the functionality i am looking for.
ASKER CERTIFIED SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
works great. thanks.