Bootstrap Navbar with Logo

A Bootstrap 4 navigation bar with a logo image - created by Start Bootstrap

by akshatha suchethan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
        Project Management System
        </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        
        <li class="nav-item dropdown mr-4">
          <a id="dropdownMenu1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="text-white nav-link dropdown-toggle">Role</a>
          <ul aria-labelledby="dropdownMenu1" class="dropdown-menu border-0 shadow">
            <li><a href="#" class="dropdown-item">
           <div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="check1" value="option1" checked>
  <label class="form-check-label" for="check1">
    Employee
  </label>
</div>
</a>
</li>
            <li><a href="#" class="dropdown-item">
           <div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="check2" value="option1" checked>
  <label class="form-check-label" for="check2">
    Resource Manager
  </label>
</div>
            </a></li>
            </ul>
        </li>
         <li class="nav-item dropdown">
          <a id="dropdownMenu1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"...

CSS

.dropdown-toggle::after {
border: none!important;
font: normal normal normal 14px/1 FontAwesome;
content: "\f107"!important; /* the desired FontAwesome icon */
vertical-align: 0;
}
.navbar{
  font-size:14px;


 background-color:#2b3361 !important;

    }
    #navbarResponsive{
    
      
    }