View source for Template:ULaVerne Collab/HoverBanner

<html>
<head>
<title>Code Edits for template</title>
<style>
#top_title {
display: none;
}
#content {
left: 0px;
height: 100%;
padding: 0px;
width: 100%;
margin-top: -7px;
margin-left: 0px;
}
body {
background-color: white;
width:100%
}
.mw-body {width: 100% !important;}
</style>

<title>Nav Bar</title>
<meta name="viewport" content="width=device-width initial-scale=1">
<style>
  * {
    margin: 0px;
    padding: 0px;
  }
 
  body {
    background:white;
  }
 
  #header {
    width: 100%;
    height: 80px;
    background:#272727;
    box-shadow: 0px 3px 5px gray;
    z-index:10;
    position:fixed;
    top: 17px;
  }
 
  #navbar {
    width: 1000px;
    height: 80px;
    float: right;
  }
 
  #navbar>li {
    width: 109px;
    list-style: none;
    float: left;
    border: none;
  }
 
  #navbar>li>a {
    display: block;
    color: white;
    line-height: 80px;
    text-align: center;
    font-family: Helvetica, sans-serif;
    font-size: 20px;
    text-decoration: none;
  }
 
    #logo {
    width: 200px;
    height: 80px;
    float: left;
    padding-left: 40px;
    margin-top: 1px;
  }
 
  #navbar>li>a:hover,
  li>a:focus {
    background: Orange;
    color: white;
    text-decoration: none;
  }
 
   .dropdown {
  float: left;
  overflow: hidden;
  height: 80px;
}

.dropdown .dropbtn {
  font-size: 20px;
  height: 80px;
  text-align: center;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: Helvetica, sans-serif;
  margin: 0;
}

.dropdown:hover .dropbtn {
  background-color: orange;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f5fffb;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd !important;
}

.dropdown:hover .dropdown-content {
  display: block;
}
 
  @media screen and (max-width: 1260px){
         #navbar {
        width: 900px;
      }

      #navbar>li {
        width: 84px;
      }

      #logo>img {
        width: 150px;
        height: 80px;
      }
      
  }
 
  @media screen and (max-width: 1060px) {
      #header {
        width: 100%;
        height: 60px;
        position: relative;
        top: 80px;
      }

      #navbar {
        width: 100%;
        height: 60px;
        float: right;        
      }

      #navbar>li {
        width: 10.5%;
      }

      #navbar>li>a {
        line-height: 60px;
        font-size: 16px;
      }
      
      #logo {
        width: 200px;
        height: 80px;
        float: left;
        padding-left: 40px;
        position: absolute;
        top: -80px;
      }
      .dropdown {
        height: 60px;
        overflow: hidden;
      }

      .dropdown .dropbtn {
        height: 60px;
        padding: 14px 16px;
        margin: 0;
        font-size: 16px;
      }
      
  }
 
 
  @media screen and (max-width: 480px) {
        #header {
        width: 100%;
        height: 60px;
      }

      #navbar {
        width: 100%;
        height: 60px;
        float: none;
      }

      #navbar>li {
        width: 100%;
        list-style: none;
        float: none;
        border-bottom: 1px solid skyblue;
      }

      #navbar>li>a {
        display: block;
        color: white;
        line-height: 60px;
        font-size: 16px;
        background: #272727;
      }
           
      .dropdown {
        height: 60px;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid skyblue;
      }

      .dropdown .dropbtn {
        height: 60px;
        width: 100%;
        padding: 14px 16px;
        float: none;
        background-color: #272727;
      }

	 .dropdown-content {
        display: none;
        width: 100%;
        z-index: 1;
	 }

    .dropdown-content a {
      float: none;
      color: black;
      display: block;
      text-align: left;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }
  }
 
 
</style>
</head>

<body>
  <div id="header">
    <div id="logo">
      <img src="https://static.igem.org/mediawiki/2019/c/c3/T--ULaVerne_Collab--Wiki-IconNew.jpg" style="width: auto; height: 81px; position: relative; left: 45px; top: -5px;"/>
    </div>
    <ul id="navbar">
    <li><a href="https://2019.igem.org/Team:ULaVerne_Collab">Home</a></li>
    <div class="dropdown">
    <button class="dropbtn">Team
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Team">Team Members</a>
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Collaborations">Collaborations</a>
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Gallery">Team Gallery</a>
    </div>
  </div>
        <div class="dropdown">
    <button class="dropbtn">Project
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Description">Description</a>
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Design">Design Overview</a>
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Construct-one">Design Phase One</a>
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Construct-two">Design Phase Two</a>
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Contribution">Contribution</a>
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Demonstrate">Demonstrate</a>
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Improve">Improve</a>
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Attributions">Attributions</a>
    </div>
  </div>
    <div class="dropdown">
    <button class="dropbtn">Notebook
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Notebook">General Notes</a>
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Experiments">Experiments</a>
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Results">Results</a>
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Failed-results">Failed Results</a>
    </div>
  </div>
    <div class="dropdown">
    <button class="dropbtn">Parts
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Parts">Overview</a>
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Basic_Part">Basic Parts</a>
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Composite_Part">Composite Parts</a>
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Part_Collection">Part Collection</a>
    </div>
  </div>
    <div class="dropdown">
    <button class="dropbtn">Safety
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Safety">General Information</a>
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Protection">Our Protection</a>
    </div>
  </div>
    <div class="dropdown">
    <button class="dropbtn">Human Practices
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Human_Practices">Overview</a>
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Public_Engagement">Education & Engagement</a>
    </div>
  </div>
   <div class="dropdown">
    <button class="dropbtn">Awards
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
    <a href="https://2019.igem.org/Team:ULaVerne_Collab/Entrepreneurship">Entrepreneurship</a>
    <a href="https://2019.igem.org/Team:ULaVerne_Collab/Hardware">Hardware</a>
    <a href="https://2019.igem.org/Team:ULaVerne_Collab/Measurement">Measurement</a>
    <a href="https://2019.igem.org/Team:ULaVerne_Collab/Model">Model</a>
      <a href="https://2019.igem.org/Team:ULaVerne_Collab/Medal_Criteria">Medal Criteria</a>
      <a href="https://igem.org/2019_Judging_Form?team=ULaVerne_Collab">Judging Form</a>
      </div>
    </div>
    </ul>
  </div>
</body>

</html>