Difference between revisions of "Template:ColumbiaNYC navbar"

 
(50 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
+
<html>
 +
<head>
 +
<!-- Bootstrap Core CSS-->
 +
<link href="https://2017.igem.org/Team:ColumbiaNYC/Resources/CSS:bootstrap_min?action=raw&ctype=text/css" rel="stylesheet">
 +
<!-- jQuery -->
 +
<script type="text/javascript" src="https://2017.igem.org/Team:ColumbiaNYC/Resources/JS:jquery?action=raw&ctype=text/javascript"></script>
 +
<!-- Bootstrap Core JavaScript -->
 +
<script type="text/javascript" src="https://2017.igem.org/Team:ColumbiaNYC/Resources/JS:bootstrap_min?action=raw&ctype=text/javascript"></script>
 +
<!-- Bootstrap Dropdown Hover CSS -->
 +
  <link href="https://2017.igem.org/Team:ColumbiaNYC/Resources/CSS:animate_min?action=raw&ctype=text/css" rel="stylesheet">
 +
  <link href="https://2017.igem.org/Team:ColumbiaNYC/Resources/CSS:bootstrap-dropdownhover_min?action=raw&ctype=text/css" rel="stylesheet">
 +
<script src="https://2017.igem.org/Team:ColumbiaNYC/Resources/JS:bootstrap-dropdownhover_min?action=raw&ctype=text/javascript"></script>
  
−
  /* Clear the default wiki settings */
+
<!-- Fonts -->
 +
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 +
<!-- Custom CSS-->
 +
<link href="https://2017.igem.org/Team:ColumbiaNYC/Resources/CSS:contentstyle?action=raw&ctype=text/css" rel="stylesheet">
 +
<!-- Custom JS -->
 +
<script type="text/javascript" src="https://2017.igem.org/Team:ColumbiaNYC/Resources/JS:contentjs?action=raw&ctype=text/javascript"></script>
  
−
  #sideMenu, #top_title, .patrollink  {display:none;}
+
</head>
−
  #content { width:100%; padding:0px;}
+
−
  body {background-color:white; width: 100%}
+
−
  #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
−
  #bodyContent {padding-right: 0px;}
+
−
  #globalWrapper {font-size: 100%; padding: 0px; margin: -10px -20px -20px -20px;}
+
  
 +
<!--- THIS IS WHERE THE HTML BEGINS --->
  
−
  /* special class that the system uses to make sure the team wants a page to be evaluated */
+
<body>
−
  .judges-will-not-evaluate {
+
−
      width: 96.6%;
+
−
      margin: 5px 15px;
+
−
      display: block;
+
−
    border: 4px solid #3399ff;
+
−
      font-weight: bold;
+
−
  }
+
  
−
  /*********************************************************************************************************/
+
<!-- Navigation -->
 +
<nav class="navbar navbar-color navbar-xs navbar-fixed-top" role="navigation" style="padding-top: 15px">
 +
<div class="container">
 +
<!-- Brand and toggle get grouped for better mobile display -->
 +
<div class="navbar-header">
 +
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-id" aria-expanded="false">
 +
<span class="sr-only">Toggle navigation</span>
 +
<span class="icon-bar"></span>
 +
<span class="icon-bar"></span>
 +
<span class="icon-bar"></span>
 +
</button>
 +
</div>
 +
<!-- Collect the nav links, forms, and other content for toggling -->
 +
<div class="collapse navbar-collapse" data-hover="dropdown" data-animations="pulse" id="navbar-id">
 +
<ul class="nav navbar-nav">
 +
<li id="navbar-brand"><a href="https://2017.igem.org/Team:ColumbiaNYC" style="text-decoration: none; background-color:transparent !important; color:#fff;">
 +
<img src='https://static.igem.org/mediawiki/2017/f/f3/T--ColumbiaNYC--columbiauniversity-white-crown.jpg' style="float:left; margin: -1.5px 6.5px 0 0;">
 +
COLUMBIA UNIVERSITY
 +
</a></li>
 +
<li class="dropdown">
 +
<a class="dropdown-toggle" href="https://2017.igem.org/Team:ColumbiaNYC/Team">TEAM<span class="caret"></span></a>
 +
<ul class="dropdown-menu">
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/Team">ABOUT US</a></li>
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/Attributions">ATTRIBUTIONS</a></li>
 +
</ul>
 +
</li>
 +
<li class="dropdown">
 +
<a class="dropdown-toggle" href="https://2017.igem.org/Team:ColumbiaNYC/Description">PROJECT<span class="caret"></span></a>
 +
<ul class="dropdown-menu">
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/Description">DESCRIPTION</a></li>
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/Design">PROOF OF CONCEPT</a></li>
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/Results">RESULTS</a></li>
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/HP/Silver">SAFETY</a></li>
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/InterLab">INTERLAB</a></li>
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/Applied_Design">APPLIED DESIGN</a></li>
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/Improve">FUTURE WORK</a></li>
 +
</ul>
 +
</li>
 +
<li class="dropdown">
 +
<a class="dropdown-toggle" href="https://2017.igem.org/Team:ColumbiaNYC/Part_Collection">PARTS<span class="caret"></span></a>
 +
<ul class="dropdown-menu">
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/Basic_Part">BASIC PARTS</a></li>
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/Composite_Part">COMPOSITE PARTS</a></li>
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/Part_Collection">PARTS COLLECTION</a></li>
 +
</ul>
 +
</li>
 +
<li class="dropdown">
 +
<a class="dropdown-toggle" href="https://2017.igem.org/Team:ColumbiaNYC/Model">MODELLING<span class="caret"></span></a>
 +
</li>
 +
<li class="dropdown">
 +
<a class="dropdown-toggle" href="https://2017.igem.org/Team:ColumbiaNYC/Notebook">NOTEBOOK<span class="caret"></span></a>
 +
<ul class="dropdown-menu">
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/Brainstorm">BRAINSTORM</a></li>
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/Notebook">LAB NOTEBOOK</a></li>
 +
</ul>
 +
</li>
 +
<li class="dropdown">
 +
<a class="dropdown-toggle" href="https://2017.igem.org/Team:ColumbiaNYC/Engagement">HUMAN PRACTICES<span class="caret"></span></a>
 +
<ul class="dropdown-menu">
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/HP/Gold_Integrated">HUMAN PRACTICES</a></li>
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/Engagement">ENGAGEMENT</a></li>
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/Entrepreneurship">ENTREPRENEURSHIP</a></li>
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/Collaborations">COLLABORATIONS</a></li>
 +
<li><a href="https://2017.igem.org/Team:ColumbiaNYC/Medals">MEDAL CRITERION</a></li>
 +
</ul>
 +
</li>
 +
</ul>
 +
</div>
 +
<!-- /.navbar-collapse -->
 +
</div>
 +
<!-- /.container -->
 +
</nav>
  
−
body {
+
</body>
−
    margin-top: 30px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
+
−
}
+
  
−
.header-image {
+
</html>
−
    display: block;
+
−
    width: 100%;
+
−
    text-align: center;
+
−
    background: url("https://static.igem.org/mediawiki/2017/7/72/T--ColumbiaNYC--bacteriaplaceholder.jpg") no-repeat center center scroll;
+
−
    -webkit-background-size: cover;
+
−
    -moz-background-size: cover;
+
−
    background-size: cover;
+
−
    -o-background-size: cover;
+
−
}
+
−
 
+
−
.headline {
+
−
    padding: 120px 0;
+
−
}
+
−
 
+
−
.headline h1 {
+
−
    font-size: 130px;
+
−
    background: #fff;
+
−
    background: rgba(255,255,255,0.9);
+
−
}
+
−
 
+
−
.headline h2 {
+
−
    font-size: 77px;
+
−
    background: #fff;
+
−
    background: rgba(255,255,255,0.9);
+
−
}
+
−
 
+
−
.featurette-divider {
+
−
    margin: 80px 0;
+
−
}
+
−
 
+
−
.featurette {
+
−
    overflow: hidden;
+
−
}
+
−
 
+
−
.featurette-image.pull-left {
+
−
    margin-right: 40px;
+
−
}
+
−
 
+
−
.featurette-image.pull-right {
+
−
    margin-left: 40px;
+
−
}
+
−
 
+
−
.featurette-heading {
+
−
    font-size: 50px;
+
−
}
+
−
 
+
−
@media(max-width:1200px) {
+
−
    .headline h1 {
+
−
        font-size: 140px;
+
−
    }
+
−
 
+
−
    .headline h2 {
+
−
        font-size: 63px;
+
−
    }
+
−
 
+
−
    .featurette-divider {
+
−
        margin: 50px 0;
+
−
    }
+
−
 
+
−
    .featurette-image.pull-left {
+
−
        margin-right: 20px;
+
−
    }
+
−
 
+
−
    .featurette-image.pull-right {
+
−
        margin-left: 20px;
+
−
    }
+
−
 
+
−
    .featurette-heading {
+
−
        font-size: 35px;
+
−
    }
+
−
}
+
−
 
+
−
@media(max-width:991px) {
+
−
    .headline h1 {
+
−
        font-size: 105px;
+
−
    }
+
−
 
+
−
    .headline h2 {
+
−
        font-size: 50px;
+
−
    }
+
−
 
+
−
    .featurette-divider {
+
−
        margin: 40px 0;
+
−
    }
+
−
 
+
−
    .featurette-image {
+
−
        max-width: 50%;
+
−
    }
+
−
 
+
−
    .featurette-image.pull-left {
+
−
        margin-right: 10px;
+
−
    }
+
−
 
+
−
    .featurette-image.pull-right {
+
−
        margin-left: 10px;
+
−
    }
+
−
 
+
−
    .featurette-heading {
+
−
        font-size: 30px;
+
−
    }
+
−
}
+
−
 
+
−
@media(max-width:768px) {
+
−
    .container {
+
−
        margin: 0 15px;
+
−
    }
+
−
 
+
−
    .featurette-divider {
+
−
        margin: 40px 0;
+
−
    }
+
−
 
+
−
    .featurette-heading {
+
−
        font-size: 25px;
+
−
    }
+
−
}
+
−
 
+
−
@media(max-width:668px) {
+
−
    .headline h1 {
+
−
        font-size: 70px;
+
−
    }
+
−
 
+
−
    .headline h2 {
+
−
        font-size: 32px;
+
−
    }
+
−
 
+
−
    .featurette-divider {
+
−
        margin: 30px 0;
+
−
    }
+
−
}
+
−
 
+
−
@media(max-width:640px) {
+
−
    .headline {
+
−
        padding: 75px 0 25px 0;
+
−
    }
+
−
 
+
−
    .headline h1 {
+
−
        font-size: 60px;
+
−
    }
+
−
 
+
−
    .headline h2 {
+
−
        font-size: 30px;
+
−
    }
+
−
}
+
−
 
+
−
@media(max-width:375px) {
+
−
    .featurette-divider {
+
−
        margin: 10px 0;
+
−
    }
+
−
 
+
−
    .featurette-image {
+
−
        max-width: 100%;
+
−
    }
+
−
 
+
−
    .featurette-image.pull-left {
+
−
        margin-right: 0;
+
−
        margin-bottom: 10px;
+
−
    }
+
−
 
+
−
    .featurette-image.pull-right {
+
−
        margin-bottom: 10px;
+
−
        margin-left: 0;
+
−
    }
+
−
}
+
−
 
+
−
/* Navbar */
+
−
.navbar-xs {
+
−
  min-height:54px;
+
−
  height: 54px;
+
−
}
+
−
 
+
−
.navbar-xs .navbar-brand{
+
−
  padding: 2px 2px;
+
−
  font-size: 13px;
+
−
  line-height: 20px;
+
−
}
+
−
 
+
−
.navbar-xs .navbar-nav > li { /* height of navbar*/
+
−
  padding-top: 4px;
+
−
}
+
−
 
+
−
.navbar-xs .navbar-nav > li > a { /* height of highlighted link on navbar*/
+
−
  padding-top: 2px;
+
−
  padding-bottom: 2px;
+
−
  line-height: 20px;
+
−
}
+
−
 
+
−
.navbar, .navbar-brand {
+
−
  max-height:20px !important;
+
−
  font-size: 13px;
+
−
  font-family: 'Open Sans', sans-serif;
+
−
  font-weight: 200;
+
−
  letter-spacing: 2px;
+
−
}
+
−
 
+
−
.navbar-nav {
+
−
    display: inline-block;
+
−
    float: none;
+
−
    margin: 0;
+
−
}
+
−
 
+
−
.mydropdown {
+
−
    display:inline;
+
−
}
+
−
 
+
−
 
+
−
/* Navbar Colors */
+
−
 
+
−
.navbar-color {
+
−
  background-color: #003a63;
+
−
  border-color: #5091cd;
+
−
  border: 0;
+
−
}
+
−
.navbar-color .navbar-brand {
+
−
  color: #ffffff;
+
−
}
+
−
.navbar-color .navbar-brand:hover,
+
−
.navbar-color .navbar-brand:focus {
+
−
  color: #000000;
+
−
}
+
−
.navbar-color .navbar-text {
+
−
  color: #ffffff;
+
−
}
+
−
.navbar-color .navbar-nav > li > a {
+
−
  color: #ffffff;
+
−
}
+
−
.navbar-color .navbar-nav > li > a:hover,
+
−
.navbar-color .navbar-nav > li > a:focus {
+
−
  color: #000000;
+
−
}
+
−
.navbar-color .navbar-nav > li > .dropdown-menu {
+
−
  background-color: #003a63;
+
−
}
+
−
.navbar-color .navbar-nav > li > .dropdown-menu > li > a {
+
−
  color: #ffffff;
+
−
}
+
−
.navbar-color .navbar-nav > li > .dropdown-menu > li > a:hover,
+
−
.navbar-color .navbar-nav > li > .dropdown-menu > li > a:focus {
+
−
  color: #000000;
+
−
  background-color:  #ffffff;
+
−
}
+
−
.navbar-color .navbar-nav > li > .dropdown-menu > li.divider {
+
−
  background-color:  #ffffff;
+
−
}
+
−
.navbar-color .navbar-nav .open .dropdown-menu > .active > a,
+
−
.navbar-color .navbar-nav .open .dropdown-menu > .active > a:hover,
+
−
.navbar-color .navbar-nav .open .dropdown-menu > .active > a:focus {
+
−
  color: #000000;
+
−
  background-color:  #ffffff;
+
−
}
+
−
.navbar-color .navbar-nav > .active > a,
+
−
.navbar-color .navbar-nav > .active > a:hover,
+
−
.navbar-color .navbar-nav > .active > a:focus {
+
−
  color: #000000;
+
−
  background-color:  #ffffff;
+
−
}
+
−
.navbar-color .navbar-nav > .open > a,
+
−
.navbar-color .navbar-nav > .open > a:hover,
+
−
.navbar-color .navbar-nav > .open > a:focus {
+
−
  color: #000000;
+
−
  background-color:  #ffffff;
+
−
}
+
−
.navbar-color .navbar-toggle {
+
−
  border-color:  #ffffff;
+
−
}
+
−
.navbar-color .navbar-toggle:hover,
+
−
.navbar-color .navbar-toggle:focus {
+
−
  background-color:  #ffffff;
+
−
}
+
−
.navbar-color .navbar-toggle .icon-bar {
+
−
  background-color: #ffffff;
+
−
}
+
−
.navbar-color .navbar-collapse,
+
−
.navbar-color .navbar-form {
+
−
  border-color: #ffffff;
+
−
}
+
−
.navbar-color .navbar-link {
+
−
  color: #ffffff;
+
−
}
+
−
.navbar-color .navbar-link:hover {
+
−
  color: #000000;
+
−
}
+
−
 
+
−
@media (max-width: 767px) {
+
−
  .navbar-color .navbar-nav .open .dropdown-menu > li > a {
+
−
    color: #ffffff;
+
−
  }
+
−
  .navbar-color .navbar-nav .open .dropdown-menu > li > a:hover,
+
−
  .navbar-color .navbar-nav .open .dropdown-menu > li > a:focus {
+
−
    color: #000000;
+
−
  }
+
−
  .navbar-color .navbar-nav .open .dropdown-menu > .active > a,
+
−
  .navbar-color .navbar-nav .open .dropdown-menu > .active > a:hover,
+
−
  .navbar-color .navbar-nav .open .dropdown-menu > .active > a:focus {
+
−
    color: #000000;
+
−
    background-color: #ffffff;
+
−
  }
+
−
}
+

Latest revision as of 04:14, 16 December 2017