"FPS NavBar"
Bootstrap 3.3.0 Snippet by DrAgOn3x

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <nav class="navbar navbar-default text-center" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class=""><a href="home.jsp">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Card Operations<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="SetFilter.jsp?Pass=1">Card Alerts</a></li> <li><a href="ProcAlertsView?Mode=1&CardNo=star&Immediate=true&GoDirect=0">Today’s Card Alerts</a></li> <li><a href="SetFilter.jsp?Pass=3">Card Activity by Rule</a></li> <li><a href="SetFilter.jsp?Pass=5">Card Activity by MCC</a></li> <li><a href="SetFilter.jsp?Pass=6">Card Activity by Country</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Card Monitoring<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="SetFilter.jsp?Pass=11">Card Exceptions</a></li> <li><a href="FpsReportList.jsp">FPS Card Reports</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Card Configuration<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="ThresholdCompLst.jsp?WeightType=I">Card Rule Types</a></li> <li><a href="SetFilter.jsp?Pass=13">BIN-Rule Records</a></li> <li><a href="SetFilter.jsp?Pass=14">MCC-Rule Records</a></li> <li><a href="SetFilter.jsp?Pass=15">Country-Rule Records</a></li> <li><a href="FpsActionsLst.jsp?ActionType=I">Card Fraud Actions</a></li> <li><a href="SetFilter.jsp?Pass=4">BIN Fraud Actions</a></li> <li><a href="WorkflowStatList.jsp?StatusType=I">Card Workflow Statuses</a></li> <li><a href="PeriodList.jsp">Fraud Periods</a></li> <li><a href="AppendFpsBin.jsp">Append New Bin</a></li> <li><a href="FpsRates.jsp">FPS Currency Rates</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">ATM/Merchant Operations<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="SetFilter.jsp?Pass=9">ATM/Merchant Alerts</a></li> <li><a href="ProcAlertsView?Mode=2&Immediate=true&GoDirect=0">Today’s ATM/Merchant Alerts</a></li> <li><a href="SetFilter.jsp?Pass=10">Merchant Activity by Rule</a></li> <!--<li><a href="SetFilter.jsp?Pass=16">ATM Activity by Rule</a></li>--> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">ATM/Merchant Monitoring<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="SetFilter.jsp?Pass=12">Merchant Exceptions</a></li> <li><a href="FpsMerchantReportList.jsp">FPS Merchant Reports</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Merchant Configuration<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="ThresholdCompLst.jsp?WeightType=A">Merchant Rule Types</a></li> <li><a href="MerchantGroups.jsp">Merchant Groups</a></li> <li><a href="SetFilter.jsp?Pass=7">Merchant Group-Rule Records</a></li> <li><a href="FpsActionsLst.jsp?ActionType=A">Merchant Fraud Actions</a></li> <li><a href="SetFilter.jsp?Pass=8">Merchant Group Fraud Actions</a></li> <li><a href="WorkflowStatList.jsp?StatusType=A">Merchant Workflow Statuses</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">ATM Config<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="AtmRuleLst.jsp?WeightType=T">ATM Rule Types</a></li> <li><a href="AtmPeriodLst.jsp">ATM Monitoring Periods</a></li> <li><a href="AtmGroups.jsp">ATM Groups</a></li> <li><a href="AtmFilter.jsp?Pass=1">ATM Group-Rule Records</a></li> <li><a href="FpsActionsLst.jsp?ActionType=T">ATM Monitoring Actions</a></li> <li><a href="AtmFilter.jsp?Pass=2">ATM Group - Monitoring Actions</a></li> <li><a href="ControlOurBIN.jsp">ATM Monitoring BIN ONUS</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="nav-divider"></li> <li><a href="logout.srv"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li> </ul> </div></div> </nav> <div class="alert alert-success" role="alert"> <a href="#" class="alert-link">...</a> </div> <div class="alert alert-info" role="alert"> <a href="#" class="alert-link">...</a> </div> <div class="alert alert-warning" role="alert"> <a href="#" class="alert-link">...</a> </div> <div class="alert alert-danger" role="alert"> <a href="#" class="alert-link">...</a> </div> </body>
.header-title { padding-left: 10px; padding-right: 10px; font-size: 16px; font-weight: bold; margin-top: 3px; } .header-subtitle { padding-left: 10px; padding-right: 10px; color: #7e787a; font-size: 12px; margin-top: 0; } .navbar-nav > li > a{ padding: 15px 8px; } .text-center { text-align:center; }

Related: See More

Now UI Dashboard React
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Bootstrap 4 Navbar with Icon Top
Transparent Sticky NavBar

Questions / Comments: