<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->
<nav class="navbar navbar-expand-lg border">
<div class="container">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li> <a class="nav-link" href="#"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
<li> <a class="nav-link" href="#"><i class="fa fa-file-text" aria-hidden="true"></i> About</a></li>
<li>
<a class="nav-link" href="#"><i class="fa fa-sticky-note" aria-hidden="true"></i> Historical </a>
</li>
<li>
<a class="nav-link" href="#"><i class="fa fa-sticky-note" aria-hidden="true"></i> Historical </a>
</li>
<li>
<a class="nav-link" href="#"><i class="fa fa-book" aria-hidden="true"></i> Admission</a>
</li>
<li>
<a class="nav-link" href="#"><i class="fa fa-linode" aria-hidden="true"></i> Facilities</a>
</li>
<li>
<a class="nav-link" href="#"><i class="fa fa-thumbs-up" aria-hidden="true"></i> Discipline</a>
</li>
<li>
<a class="nav-link" href="#"><i class="fa fa-address-card" aria-hidden="true"></i> Contact </a>
</li>
</ul>
</div></div>
</nav>
@charset "utf-8";
/* CSS Document */
.navbar {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0rem 0.5rem;
background-color: #066BA3;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right:1rem;
padding-left: 1rem;
color: #FFF;
}
.navbar-nav {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
padding-left:0;
margin-bottom: 0;
list-style: none;
}
.navbar-brand {
display: inline-block;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 0rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
.navbar-nav .nav-link {
padding-right: 0;
padding-left: 0;
}
.navbar-nav .dropdown-menu {
position: static;
float: none;
}
ul {
list-style: none;
width:100%;
}
li {
display: inline-block;
width:12.5%;
text-align:center;
border-right-width: 0.15mm;
border-left-width: .15mm;
border-right-style: solid;
border-left-style: solid;
border-right-color: #eee;
border-left-color: #eee;
font-family: 'Oswald', sans-serif;
font-size: 15px;
margin-right: 1px;
}
@media (max-width:576px) {
ul {
list-style: none;
width:100%;
}
li {
display: inline-block;
width:100%;
padding:0;
text-align:center;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #CCC;
border-left-color: #CCC;
}
}
.navbar-light .navbar-nav .nav-link {
color: #fff;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
color: rgba(255, 255, 255, 0.7);
}
.navbar-light .navbar-nav .nav-link.disabled {
color: rgba(255, 255, 255, 0.3);
}
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
color: rgba(0, 0, 0, 0.9);
}
.navbar-light .navbar-toggler {
color:#FFF;
border-color: #FFF;
}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(235, 235, 235, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
font-weight: normal;
}
.navbar-light .navbar-text {
color: rgba(0, 0, 0, 0.5);
}
.navbar-light .navbar-text a {
color: rgba(0, 0, 0, 0.9);
}
.navbar-light .navbar-text a:focus, .navbar-light .navbar-text a:hover {
color: rgba(0, 0, 0, 0.9);
}
