Difference between revisions of "Team:UNOTT/Template/NavBarTest"

Line 1: Line 1:
 
+
<html>
<html >
+
 
<head>
 
<head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <link href="https://2017.igem.org/Team:UNOTT/Bootstrap?action=raw&ctype=text/css" rel="stylesheet">
 
   <link href="https://2017.igem.org/Team:UNOTT/Bootstrap?action=raw&ctype=text/css" rel="stylesheet">
+
  <link rel="stylesheet" href="css/style.css">
 
+
<link href="https://2017.igem.org/Team:UNOTT/CSS?action=raw&ctype=text/css" rel="stylesheet">
<style>
+
nav{
+
height: 71px;
+
 
+
width: 100%;
+
color: black;
+
background: #ffff;
+
font-family: 'Karla';
+
text-transform:uppercase;
+
 
+
filter: none !important;
+
box-shadow: 0 2px 15px rgba(0,0,0,0.25);
+
-moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
+
-webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
+
border-bottom: 1px solid rgba(0,0,0,0.2);
+
 
+
}
+
 
+
.navbar-default {
+
  background-color: #ffff;
+
  border-color: rgba(255, 255, 255, 0.3);
+
  font-family: 'Karla', sans-serif;
+
  font-weight: 300;
+
  -webkit-transition: all 0.35s;
+
  -moz-transition: all 0.35s;
+
  transition: all 0.35s;
+
  margin : 0 !important;
+
}
+
 
+
.navbar-default .navbar-header .navbar-brand {
+
  color: #white;
+
  font-family: 'Karla', sans-serif;
+
  font-weight: none;
+
  font-size: 22px;
+
  display: inline-block;
+
  background: black
+
}
+
.navbar-default .navbar-header .navbar-toggle {
+
  font-family: 'Karla', sans-serif;
+
  font-weight: 400; bold;
+
  font-size: 14px;
+
  color: #white;
+
  text-transform: uppercase;
+
}
+
 
+
/* FONT */
+
.navbar-default .nav > li > a,
+
.navbar-default .nav > li > a:focus {
+
  text-transform: uppercase;
+
  font-family: 'Karla', sans-serif;
+
  font-weight: bold;
+
  font-size: 14px;
+
  color: #white;
+
}
+
 
+
.navbar-default .nav > li > a:hover,
+
.navbar-default .nav > li > a:focus:hover {
+
  color: #white;
+
}
+
 
+
/*Navbar background colour*/
+
 
+
.navbar-default .nav > li.active > a,
+
.navbar-default .nav > li.active > a:focus {
+
  color: #CF5435 !important;
+
  background-color: black;
+
}
+
 
+
.navbar-default .nav > li.active > a:hover,
+
.navbar-default .nav > li.active > a:focus:hover {
+
  background-color: black;
+
  border-left-color: black; border-top-color: black;
+
}
+
 
+
.navbar-default .navbar-toggle {
+
  border: none;
+
}
+
/*dropdown menu colours*/
+
.navbar-default .dropdown-menu > li > a:hover,
+
.navbar-default .dropdown-menu > li > a:focus {
+
  background-color: #CDD7B6;
+
  color: #blue;
+
}
+
 
+
.navbar-default .dropdown-menu {
+
  border: none;
+
  outline: none;
+
  font-family: 'Karla', sans-serif;
+
  text-transform: uppercase;
+
  font-weight: bold;
+
  font-size: 14.2px !important;
+
  color: #CF5435;
+
}
+
 
+
.dropdown-header { font-size: 16px; color: black; padding-bottom: 1px;}
+
.dropdown-menu {padding-bottom: 1px; padding-top: 0px;}
+
/* Default Font and Sizing of Website */
+
 
+
@media screen and (max-width: 760px) {
+
  /*Make dropdown links appear inline*/
+
 
+
 
+
 
+
nav ul {
+
    position: static;
+
    display: flex;
+
    float: right;
+
    margin: 0px;
+
    margin-top:0px;
+
    padding: 0px 0px;
+
    justify-content:space-around;
+
 
+
}
+
 
+
  /*Create vertical spacing*/
+
  li {
+
    margin-bottom: 1px;
+
  }
+
  /*Make all menu links full width*/
+
  ul li,
+
  li a {
+
    width: 100%;
+
  }
+
}
+
 
+
 
+
/* Visiting Links */
+
 
+
 
+
a:visited {
+
  color: #333A56;
+
}
+
 
+
.content {
+
margin-top:50px;
+
}
+
 
+
 
+
 
+
.red {
+
  color: #EA3923;
+
}
+
 
+
.blue {
+
  color: #0C68E6;
+
}
+
 
+
.darkblue {
+
  color: #52658F;
+
}
+
 
+
.yellow {
+
  color: #FFDF1E;
+
}
+
 
+
.green {
+
  color: #32BE01;
+
}
+
 
+
.cream {
+
  color: #F7F5E6;
+
}
+
 
+
.grey {
+
  color: #E8E8E8;
+
}
+
 
+
.darkgrey {
+
  color: #8C8C8C;
+
}
+
 
+
 
+
 
+
 
+
  
.container {
 
  margin-top:10px;
 
}
 
  
 
</style>
 
</style>
Line 276: Line 98:
 
   </div>
 
   </div>
 
</div>
 
</div>
   <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+
    
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
+
 
 
</nav>
 
</nav>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 12:07, 25 August 2017