Difference between revisions of "Template:William and Mary/NAV BAR"

Line 1: Line 1:
<html>
+
<html lang='en'>    
<head> </head>
+
  <nav class="navbar navbar-default navbar-transparent navbar-fixed-top" role="navigation">
 
+
<!--"navbar-burger" will create an invisible navbar like the one in our 2015 page-->
<style>
+
<div class="container">
.dropdown {
+
    position: relative;
+
    display: inline-block;
+
}
+
 
+
.dropdown-content {
+
    display: none;
+
    position: absolute;
+
    background-color: #120971;
+
    min-width: 120px;
+
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
    z-index: 1;
+
}
+
 
+
.dropdown-content a {
+
    color: white;
+
    padding: 10px 13px;
+
    text-decoration: none;
+
    display: block;
+
    font-size: 13px;
+
}
+
 
+
.dropdown-content a:hover {
+
background-color: #C0C0C4;
+
}
+
 
+
.dropdown:hover .dropdown-content {
+
    display: block;
+
}
+
 
+
.nav.navbar-nav.navbar-right li a {
+
    color: #F6F6F7;
+
font-family:Helvetica;
+
}
+
 
+
.nav.navbar-nav.navbar-right li a:hover {
+
    text-decoration: underline;
+
    color: black;
+
}
+
</style>
+
 
+
<body>
+
 
+
<nav style="background-color: #120971" class="navbar navbar-inverse navbar-fixed-top ">
+
<div class="container-fluid">
+
 
<div class="navbar-header">
 
<div class="navbar-header">
<a class="navbar-brand" href="https://2018.igem.org/Team:William_and_Mary">W&M iGEM</a>
+
<button id="menu-toggle" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example">
 +
<span class="sr-only">Toggle navigation</span>
 +
<span class="icon-bar bar1"></span>
 +
<span class="icon-bar bar2"></span>
 +
<span class="icon-bar bar3"></span>
 +
</button>
 +
<a href='https://2016.igem.org/Team:William_and_Mary' class="navbar-brand">
 +
W&M
 +
</a>
 +
</div>
 +
<div class="collapse navbar-collapse">
 +
<ul class="nav navbar-nav navbar-right navbar-uppercase">
 +
<!--li class="social-links">
 +
<a href="https://www.facebook.com/WMiGEM16/?fref=ts">
 +
<i class="fa fa-facebook"></i>
 +
</a>
 +
<a href="https://twitter.com/wmigem">
 +
<i class="fa fa-twitter"></i>
 +
</a-->
 +
<!--
 +
<a href="#">
 +
<i class="fa fa-instagram"></i>
 +
</a>
 +
-->
 +
<!--/li-->
 +
<li>
 +
<a href="https://2016.igem.org/Team:William_and_Mary">
 +
Overview
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2016.igem.org/Team:William_and_Mary/Description">
 +
Description
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2016.igem.org/Team:William_and_Mary/Parts">
 +
Parts
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2016.igem.org/Team:William_and_Mary/Results">
 +
Results
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2016.igem.org/Team:William_and_Mary/Model">
 +
Modeling
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2016.igem.org/Team:William_and_Mary/Collaborations">
 +
Collaboration
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2016.igem.org/Team:William_and_Mary/Engagement">
 +
Outreach
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2016.igem.org/Team:William_and_Mary/Team">
 +
Team
 +
</a>
 +
</li>
 +
</ul>
 
</div>
 
</div>
<ul class="nav navbar-nav navbar-right">
 
<li><a href="https://2018.igem.org/Team:William_and_Mary">Home</a></li>
 
<li class="dropdown"><a id = "wnm-top-nav" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Project<span class="caret"></span></a>
 
                                  <ul style="right: -15px; top: 66px"class="dropdown-content">
 
                                        <a href="#">Freezing Cells</a>
 
                                        <a href="#">3G Assembly</a>
 
                                  </ul>
 
                              </li>
 
<li><a href="#">Results</a></li>
 
<li><a href="#">Modeling</a></li>
 
<li><a href="#">Human Practices</a></li>
 
<li><a href="#">Database</a></li>
 
<li><a href="#">Judging</a></li>
 
<li><a href="https://2018.igem.org/Team:William_and_Mary/Team">Team</a></li>
 
</ul>
 
 
</div>
 
</div>
</nav>
+
    </nav>
 
+
</body>
+
 
+
 
</html>
 
</html>

Revision as of 15:02, 9 July 2018