Suggest a feature
×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: HTML
Posted by: Kelly Walker
Added: Aug 13, 2018 8:47 PM
Modified: Aug 13, 2018 9:18 PM
Views: 4
Tags: no tags
This is the nave bar template for bootstrap. This contains brand and Hamburger menu options. With 4 links. With efects CSS Attached
  1.         <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  2.             <div class="container">
  3.                 <a href="index.php" class="navbar-brand">Silver 9 Design</a>
  4.                 <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
  5.                     <span class="navbar-toggler-icon"></span>
  6.                 </button>
  7.                 <div class="collapse navbar-collapse" id="navbarCollapse">
  8.                     <ul class="navbar-nav ml-auto">
  9.                         <li class="nav-item active">
  10.                             <a href="index.php" class="nav-link">Home</a>
  11.                         </li>
  12.                         <li class="nav item ">
  13.                             <a href="#" class="nav-link">About</a>
  14.                         </li>
  15.                         <li class="nav item ">
  16.                             <a href="#" class="nav-link">Services</a>
  17.                         </li>
  18.                         <li class="nav item">
  19.                             <a href="#" class="nav-link">Blog</a>
  20.                         </li>
  21.                         <li class="nav item">
  22.                             <a href="#" class="nav-link">Contact</a>
  23.                         </li>
  24.                     </ul>
  25.                     </button>
  26.                 </div>
  27.             </div>
  28.         </nav>
  29.        
  30.      <style type="text/css">
  31.             .navbar .nav-link{
  32.                 font-size: 14px;
  33.                 text-transform: uppercase;
  34.                 padding-left: 1.5rem !important;
  35.                 padding-right: 1.5rem !important;
  36.             }
  37.  
  38.             .navbar .nav-item.active {
  39.                 border-left: #444 3px solid;
  40.             }
  41.       </style>