Difference between revisions of "Template:AshesiGhana/NavBar"

Line 23: Line 23:
 
<style>
 
<style>
 
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
 
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
−
   
+
−
    /* Clear the default wiki settings */
+
/* Clear the default wiki settings */
−
   
+
−
    #home_logo, #sideMenu { display:none; }
+
#home_logo, #sideMenu { display:none; }
−
    #sideMenu, #top_title, .patrollink  {display:none;}
+
#sideMenu, #top_title, .patrollink  {display:none;}
−
    #content { width:100%; padding:0px;  margin-top:-13px; margin-left:0px;}
+
#content { width:100%; padding:0px;  margin-top:-13px; margin-left:0px;}
−
    body {background-color:white; }
+
body {background-color:white; }
−
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
  
Line 67: Line 67:
 
   margin-top:10px;
 
   margin-top:10px;
 
   padding:0;
 
   padding:0;
−
   background: #262626;
+
   background: rgba(169,59,63,0.7);
 
   font-size: 80%;
 
   font-size: 80%;
 
}
 
}
Line 284: Line 284:
 
</div>
 
</div>
 
     <div class="brand" >
 
     <div class="brand" >
−
       <a rel="nofollow" rel="noreferrer" href="https://2017.igem.org/Team:AshesiGhana">Ashesi University College</a>
+
       <a href="#" class="pull-left" ><img style="max-width:6%; max-height:6%;" src="https://static.igem.org/mediawiki/2017/a/ac/T--AshesiGhana--ashigemlogo.png">
 +
Ashesi University College
 +
    </a>
 
     </div>
 
     </div>
−
    <nav>
 
−
      <div class="nav-mobile"><a rel="nofollow" rel="noreferrer"id="nav-toggle" href="#!"><span></span></a></div>
 
−
      <ul class="nav-list">
 
−
        <li>
 
−
          <a rel="nofollow" rel="noreferrer" href="https://2017.igem.org/Team:AshesiGhana">Home</a>
 
−
        </li>
 
−
        <li>
 
−
          <a rel="nofollow" rel="noreferrer"href="#!">Team</a>
 
−
          <ul class="nav-dropdown">
 
−
            <li><a href="https://2017.igem.org/Team:AshesiGhana/Team">Meet The Miners</a></li>
 
−
<li><a href="https://2017.igem.org/Team:AshesiGhana/Contributors">Contributors</a></li>
 
−
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/Sponsors">Sponsors</a></li>
 
−
                                        </ul>
 
−
        </li>
 
−
        <li>
 
−
          <a rel="nofollow" rel="noreferrer"href="#!">Project</a>
 
−
          <ul class="nav-dropdown">
 
−
<li><a href="https://2017.igem.org/Team:AshesiGhana/Motivation">Motivation</a></li>
 
−
            <li><a href="https://2017.igem.org/Team:AshesiGhana/Description">Description</a></li>
 
−
                                         
 
−
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/Results">Results</a></li>
 
−
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/Safety">Safety</a></li>
 
−
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/Interlab">Interlab</a></li>
 
−
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/Improvements">Improvements</a></li> </ul>
 
−
        </li>
 
−
        <li>
 
−
          <a rel="nofollow" rel="noreferrer"href="#!">Parts</a>
 
−
          <ul class="nav-dropdown">
 
−
            <li><a href="https://2017.igem.org/Team:AshesiGhana/Parts">Parts</a></li>                                         
 
−
<li><a href="https://2017.igem.org/Team:AshesiGhana/fret">FRET</a></li>
 
−
<li><a href="https://2017.igem.org/Team:AshesiGhana/goldlib">Gold Liberation</a></li>
 
−
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/collection">Parts Collection</a></li></ul>
 
−
        </li>
 
−
        <li>
 
−
          <a rel="nofollow" rel="noreferrer"href="#!">Human Practices</a>
 
−
          <ul class="nav-dropdown">
 
−
            <li><a href="https://2017.igem.org/Team:AshesiGhana/Engagement">Public Engagement</a></li>
 
−
          </ul>
 
−
        </li>
 
−
<li>
 
−
                            <a rel="nofollow" rel="noreferrer"href="#!">Notebook </a>
 
−
                            <ul class="nav-dropdown">
 
−
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/Brainstorm">Brainstorm</a></li>
 
−
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/Notebook">Lab Notebook</a></li>
 
−
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/Protocols">Protocols</a></li>
 
−
                                        </ul>
 
−
                        </li>
 
−
        <li>
 
−
          <a rel="nofollow" rel="noreferrer"href="#!">Awards</a>
 
−
          <ul class="nav-dropdown">
 
−
                                          <li><a href="https://2017.igem.org/Team:AshesiGhana/Collaborations">Collaborations</a></li>
 
−
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/Medal">Medal Citerion</a></li> </ul>
 
−
        </li>
 
−
      </ul>
 
−
    </nav>
 
−
  </div>
 
−
</section>
 
−
 
−
 
−
<script>
 
−
(function($) { // Begin jQuery
 
−
  $(function() { // DOM ready
 
−
    // If a link has a dropdown, add sub menu toggle.
 
−
    $('nav ul li a:not(:only-child)').click(function(e) {
 
−
      $(this).siblings('.nav-dropdown').toggle();
 
−
      // Close one dropdown when selecting another
 
−
      $('.nav-dropdown').not($(this).siblings()).hide();
 
−
      e.stopPropagation();
 
−
    });
 
−
    // Clicking away from dropdown will remove the dropdown class
 
−
    $('html').click(function() {
 
−
      $('.nav-dropdown').hide();
 
−
    });
 
−
    // Toggle open and close nav styles on click
 
−
    $('#nav-toggle').click(function() {
 
−
      $('nav ul').slideToggle();
 
−
    });
 
−
    // Hamburger to X toggle
 
−
    $('#nav-toggle').on('click', function() {
 
−
      this.classList.toggle('active');
 
−
    });
 
−
  }); // end DOM ready
 
−
})(jQuery); // end jQuery
 
−
</script>
 
−
</head>
 
−
</html>
 
−
<html>
 
−
<head>
 
−
<meta charset="utf-8">
 
−
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
−
 
−
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
−
 
−
<!-- icons -->
 
−
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
−
 
−
<!--jquery-->
 
−
 
−
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
 
−
<!-- Latest compiled and minified CSS -->
 
−
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
−
 
−
<script type="text/javascript" async
 
−
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
 
−
</script>
 
−
 
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
−
 
−
<style>
 
−
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
 
−
   
 
−
    /* Clear the default wiki settings */
 
−
   
 
−
    #home_logo, #sideMenu { display:none; }
 
−
    #sideMenu, #top_title, .patrollink  {display:none;}
 
−
    #content { width:100%; padding:0px;  margin-top:-13px; margin-left:0px;}
 
−
    body {background-color:white; }
 
−
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
−
 
−
 
−
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 
−
body {
 
−
  background-color: white;
 
−
  width: 100%;
 
−
}
 
−
 
−
#bodyContent h1,
 
−
#bodyContent h2,
 
−
#bodyContent h3,
 
−
#bodyContent h4,
 
−
#bodyContent h5 {
 
−
  margin-bottom: 0px;
 
−
}
 
−
</style>
 
−
 
−
<style>
 
−
.description{
 
−
color: black !important;
 
−
font-family: 'Josefin Sans', sans-serif;
 
−
padding-left: 10%;
 
−
padding-right: 10%;
 
−
margin: 0 auto;
 
−
position: relative;
 
−
max-width: 100em;
 
−
}
 
−
 
−
</style>
 
−
 
−
<style>
 
−
@charset "UTF-8";
 
−
.navigation {
 
−
  height: 70px;
 
−
  margin-top:10px;
 
−
  padding:0;
 
−
  background: #262626;
 
−
  font-size: 80%;
 
−
}
 
−
 
−
.brand {
 
−
  position: absolute;
 
−
  float: left;
 
−
  padding-left:2%;
 
−
  line-height: 80px;
 
−
  text-transform: uppercase;
 
−
  font-size: 1.4em;
 
−
}
 
−
 
−
/* ASHESI COLLEGE*/
 
−
.brand a,
 
−
.brand a:visited{
 
−
  color: #ffffff;
 
−
  text-decoration: none;
 
−
  font-family: 'Josefin Sans', sans-serif;
 
−
  font-size: 100%;
 
−
}
 
−
 
−
.nav-container {
 
−
  max-width: 1150px;
 
−
  margin: 0 auto;
 
−
}
 
−
 
−
nav {
 
−
  float: right;
 
−
  background: none;
 
−
}
 
−
nav ul {
 
−
  list-style: none;
 
−
  margin: 0;
 
−
  padding: 0;
 
−
  background: #262626;
 
−
 
 
−
}
 
−
nav ul li {
 
−
  float: left;
 
−
  position: relative;
 
−
  background: red;
 
−
 
 
−
}
 
−
 
−
/* text inside navbar before */
 
−
nav ul li a,
 
−
nav ul li a:visited {
 
−
  display: block;
 
−
  height: 65px;
 
−
  padding: 0 20px;
 
−
  background: #262626;
 
−
  line-height: 80px;
 
−
  //background: purple;
 
−
  color: #ffffff;
 
−
  text-decoration: none;
 
−
  font-family: 'Josefin Sans', sans-serif;
 
−
  font-size: 120%;
 
−
}
 
−
nav ul li a:hover,
 
−
nav ul li a:visited:hover {
 
−
  background: #2581DC;
 
−
  color: #ffffff;
 
−
  text-decoration: none;
 
−
}
 
−
nav ul li a:not(:only-child):after,
 
−
nav ul li a:visited:not(:only-child):after {
 
−
  padding-left: 4px;
 
−
  content: ' ▾';
 
−
  text-decoration: none;
 
−
}
 
−
 
−
nav ul li ul {
 
−
  height: 5px;
 
−
}
 
−
 
−
 
−
nav ul li ul li {
 
−
  min-width: 150px;
 
−
  height: 50px;
 
−
  width: 100%;
 
−
 
 
−
 
−
  /* make dropdown stick to top */
 
−
  top: -5px;
 
−
}
 
−
nav ul li ul li a {
 
−
  padding: 15px;
 
−
  line-height: 50%;
 
−
  margin: 0px;
 
−
  text-decoration: none;
 
−
 
−
}
 
−
 
−
.nav-dropdown {
 
−
  position: absolute;
 
−
  display: none;
 
−
  left: -23px;
 
−
  top: 65px;
 
−
  z-index: 1;
 
−
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
 
−
  height: 100%;
 
−
}
 
−
 
−
/* Mobile navigation */
 
−
.nav-mobile {
 
−
  float:right;
 
−
  display: none;
 
−
  position: absolute;
 
−
  top: 0;
 
−
  right: 0;
 
−
  height: 20px;
 
−
  width: 70px;
 
−
  background: #262626;
 
−
 
−
}
 
−
 
−
@media only screen and (max-width: 950px) {
 
−
  .nav-mobile {
 
−
    display: block;
 
−
  }
 
−
 
−
  nav {
 
−
    width: 100%;
 
−
    padding: 0 0 0;
 
−
  }
 
−
 
−
  /* background of mobile dropdown */
 
−
  nav ul {
 
−
    display: none;
 
−
 
−
    /* width of dropdown */
 
−
    position: fixed;
 
−
    width: 180px;
 
−
    height: auto;
 
−
   
 
−
    top: 81px;
 
−
    right: 0px;
 
−
 
−
  }
 
−
  nav ul li {
 
−
    float: none;
 
−
    text-align: center;
 
−
  }
 
−
  nav ul li a {
 
−
    padding: 15px;
 
−
    line-height: 20px;
 
−
   
 
−
  }
 
−
 
−
 
−
/* toggle dropdown */
 
−
  .nav-dropdown {
 
−
  position:fixed;
 
−
 
 
−
  top: 81px;
 
−
  width: 180px;
 
−
  height: auto;
 
−
 
−
 
−
  }
 
−
  .brand{
 
−
    padding-left: 10%;
 
−
  }
 
−
}
 
−
 
−
 
−
/* background of toggle (mobile) */
 
−
#nav-toggle {
 
−
  position: absolute;
 
−
  left: 18px;
 
−
  top: 22px;
 
−
  cursor: pointer;
 
−
  padding: 10px 35px 16px 0px;
 
−
  background: #262626;
 
−
}
 
−
 
−
/* toggle button (mobile) */
 
−
#nav-toggle span,
 
−
#nav-toggle span:before,
 
−
#nav-toggle span:after {
 
−
  cursor: pointer;
 
−
  border-radius: 1px;
 
−
  height: 5px;
 
−
  width: 35px;
 
−
  background: #ffffff;
 
−
  position: absolute;
 
−
  display: block;
 
−
  content: '';
 
−
  transition: all 300ms ease-in-out;
 
−
}
 
−
#nav-toggle span:before {
 
−
  top: -10px;
 
−
}
 
−
#nav-toggle span:after {
 
−
  bottom: -10px;
 
−
}
 
−
#nav-toggle.active span {
 
−
  background-color: transparent;
 
−
}
 
−
#nav-toggle.active span:before, #nav-toggle.active span:after {
 
−
  top: 0;
 
−
}
 
−
#nav-toggle.active span:before {
 
−
  transform: rotate(45deg);
 
−
}
 
−
#nav-toggle.active span:after {
 
−
  transform: rotate(-45deg);
 
−
}
 
−
 
−
</style>
 
−
 
−
<section class="navigation navbar-fixed-top">
 
−
  <div class="nav-container">
 
−
<div style="float:right;">
 
−
</div>
 
−
 
−
    <div class="brand" >
 
−
    <a href="#" class="pull-left"><img style="max-width:6%; max-height:6%;" src="https://static.igem.org/mediawiki/2017/a/ac/T--AshesiGhana--ashigemlogo.png">Ashesi University<br> College</a>
 
−
    </div>
 
−
 
 
     <nav>
 
     <nav>
 
       <div class="nav-mobile"><a rel="nofollow" rel="noreferrer"id="nav-toggle" href="#!"><span></span></a></div>
 
       <div class="nav-mobile"><a rel="nofollow" rel="noreferrer"id="nav-toggle" href="#!"><span></span></a></div>

Revision as of 00:49, 14 August 2017

Ashesi University College