menu icon

codelevel
codelevel used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Marco GasiFreelancer
Top Expert 2010

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

Author

Commented:
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?

Author

Commented:
when the three dash menu is clicked it should toggle to x. thats the functionality i am looking for.
Owner (Aidellio)
Most Valuable Expert 2015
Commented:
Here's a simple CSS solution:

button[aria-expanded=true] {
  color: white;
}
button[aria-expanded=true]::before {
  content: 'x' !important;
}
button[aria-expanded=true] span {
  display: none !important;
}

Open in new window

Author

Commented:
works great. thanks.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial