How to make a menu remain active after clicking it?

Question

I want the menu once instead of copying it again and change the active class based on the page its was redirected to.

If possible no JavaScript but if it cannot be done using CSS only then JavaScript will do

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

  <div class="navbar-header">

    <button type="button" id="togglenav" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <h3 style=" padding-left: 15px"> Malel's Boutique </h3>
  </div>


  <div class="collapse navbar-collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li>
        <a href="product.php"> <span class="glyphicon glyphicon-glass" aria-hidden="true"></span>&nbsp;Product</a>
      </li>
      <li><a href="order.php"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>&nbsp;Orders</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span>&nbsp;Sales</a></li>
      <li><a href="member.php"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;Member</a></li>
      <li><a href="settings.php"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span>&nbsp;Settings</a></li>
      <li><a href="add.php"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp; Employee</a></li>
      <li> <a href="#message" data-toggle="modal"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>&nbsp; Sign Out</a></li>
    </ul>


  </div>
</nav>
<div style="top: 20%" class="modal fade" id="message" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header" style=" background-color: skyblue">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <p style=" font-size: 19px; color: black">Sign out? </p>
      </div>
      <div class="modal-body">
        <p style="color: black">Are you sure you want to log out?</p>
      </div>
      <div class="modal-footer">
        <button Style=" margin-left: 160px;" type="button" class="btn btn-default" data-dismiss="modal"><b>NO</b></button>
        <button type="button" class="btn btn-default"><b>Yes</b></button>
      </div>

    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

You're missing your Javascript/CSS. Can you put this in a jsfiddle so we can see exactly how it behaves right now? — Dandy, Jan 19 '16 at 07:51
make a jsfiddle of your code we will certainly help u currently you have not posted your css and javascript. — Rajesh Patel, Jan 19 '16 at 08:00
You just log in jsfiddle.com, and post your code there and click on save. You will then get a link that you will include in your post. Hope that helps ! — Mathemagician, Jan 19 '16 at 08:11
@AnecitoAlimaSantillan You can create https://jsfiddle.net/ here. — ketan, Jan 19 '16 at 08:16

How to make a menu remain active after clicking it?

0 Answers0