Menu
I am using a Bootstrap nav-bar for a wizard progress indicator. I want to make sure that steps of the wizard which have not been visited yet are not clickable. I would like them to appear in the nav-bar, but have them be greyed out and the links be disabled.
Can this be done in the Bootstrap nav-bar?
393
To set an active class in your bootstrap navbar, you can use ng-controller(NavigationController) to set bootstrap navbar active class with AngularJS. To run a single controller outside ng-view. You can set class= “active” when the angular route is clicked.
To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" . Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse" , followed by an id that matches the data-target of the button: "thetarget".
To make the clicked tab active in the navigation bar, the <li> corresponding to the clicked href in index. html introduces the css of 'active' class and removes the 'active' class from the previous <li> on click.
As of Bootstrap 4, you can use the spacing utilities. Add for instance px-2 in the classes of the nav-item to increase the padding.
You can add the disabled class to the container <li>:
<ul class="nav nav-list"> <li class="disabled"><a href="index.html">...</a></li> </ul> However, to disallow users clicking them, you should use JavaScript to prevent this:
$(document).ready(function() { $(".nav li.disabled a").click(function() { return false; }); }); Another way is replacing the href property with an anchor (#) temporarily.
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
