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/CSSTest?action=raw&ctype=text/css" rel="stylesheet">
−
<link href="https://2017.igem.org/Team:UNOTT/CSS?action=raw&ctype=text/css" rel="stylesheet">
+
 
 +
 
 +
<style>
 +
 
 +
/*NAVBAR HEIGHT*/
 +
nav{
 +
height: 71px;
 +
width: 100%;
 +
color: #006633;
 +
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 BACKGROUND everything else does nothing? */
 +
.navbar-default {
 +
  background-color: #ffffff;
 +
  border-color: rgba(255, 255, 255, 0.3);
 +
  font-family: 'Karla', sans-serif;
 +
  font-weight: 300;
 +
  color: #005480
 +
  -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: 30px;
 +
  display: inline-block;
 +
  background: #ffffff
 +
}
 +
.navbar-default .navbar-header .navbar-toggle {
 +
  font-family: 'Helvetica', sans-serif;
 +
  font-weight: 400; bold;
 +
  font-size: 20px;
 +
  color: #005480;
 +
  text-transform: uppercase;
 +
}
 +
 
 +
/* FONT & NAVBAR MAIN LINK COLOUR INACTIVE*/
 +
.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: #96A296;
 +
}
 +
 
 +
 
 +
/*Navbar background colour WOW*/
 +
.navbar-default .navbar-nav > li > a:hover,
 +
.navbar-default .navbar-nav > li > a:focus {
 +
    background-color: #;
 +
    color: #005480;
 +
}
 +
 
 +
 
 +
.navbar-default .nav > li.active > a,
 +
.navbar-default .nav > li.active > a:focus {
 +
  color: #005480 !important;
 +
  background-color: #005480;
 +
}
 +
 
 +
.navbar-default .nav > li.active > a:hover,
 +
.navbar-default .nav > li.active > a:focus:hover {
 +
  background-color: #005480;
 +
  border-left-color: #005480; border-top-color: #005480;
 +
  color: #005480
 +
}
 +
 
 +
 
 +
.navbar-default .navbar-toggle {
 +
  border: none;
 +
}
 +
/*dropdown menu colours*/
 +
 
 +
/* DROP MENU CLICK BG */
 +
.navbar-default .dropdown-menu > li > a:focus {
 +
  background-color: #02263E;
 +
  color: #FFFFFF;
 +
}
 +
 
 +
.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: #02263E;
 +
}
 +
 
 +
/* NAVBAR DROPDOWN TEXT COLOUR */
 +
.navbar-default li a {
 +
    color: #black;
 +
}
 +
 
  
 +
.navbar-default > li.dropdown.active.open > a,
 +
.navbar-default > li.dropdown.active.open > ul.dropdown-menu a:hover,
 +
.navbar-default > li.dropdown.open > a,
 +
.navbar-default> li.dropdown.open > ul.dropdown-menu a:hover
 +
{
 +
  color: #fff;
 +
  background-color: #RED;
 +
  border-color: #fff;
 +
}
  
 +
.dropdown-toggle ul a {
 +
    color: #005480
 +
}
 
</style>
 
</style>
  
Line 93: Line 215:
 
   </div>
 
   </div>
 
</div>
 
</div>
−
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
+
 
−
    <div class="container">
+
−
      <p>&copywrite SiteName</p>
+
−
  </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 16:00, 25 August 2017