Difference between revisions of "Template:UC Davis/header"

Line 27: Line 27:
  
 
/*----------------------Header Styling-------------------------*/
 
/*----------------------Header Styling-------------------------*/
−
 
  
  
Line 36: Line 35:
 
align-items: center;
 
align-items: center;
 
background-color: #002855;
 
background-color: #002855;
−
margin: 0;
 
 
list-style: none;
 
list-style: none;
 
padding: 40px;
 
padding: 40px;
−
width: 100%;
 
−
overflow: hidden;
 
  
 
}
 
}
−
#topnav div, a {
+
#topnav li, a {
 +
  text-decoration: none;
 +
}
 +
#topnav li:hover, a:hover {
 
   text-decoration: none;
 
   text-decoration: none;
 
}
 
}
−
#topnav li.logo {
 
−
  display: inline-flex;
 
−
  justify-content: center;
 
  
−
}
 
 
#topnav .nav-item:visited {
 
#topnav .nav-item:visited {
 
   color: white;
 
   color: white;
 
}
 
}
−
#topnav .b-dropdown-main:visited{
+
#topnav .b-nav-item:visited {
 
   color: #525b65;
 
   color: #525b65;
 
}
 
}
 
.dropdown {
 
.dropdown {
−
   padding-left: 15px;
+
   flex-grow: 1;
−
   padding-right: 15px;
+
   max-width: 150px;
 +
  white-space: nowrap;
 +
  text-align: center;
 
}
 
}
 
.dropdown-main,
 
.dropdown-main,
Line 87: Line 84:
 
.dropdown:hover .dropdown-content {
 
.dropdown:hover .dropdown-content {
 
display: block;
 
display: block;
−
 
−
}
 
−
#topnav li a:hover{
 
−
  text-decoration: none;
 
 
}
 
}
 +
 
.dropdown-content a:hover {
 
.dropdown-content a:hover {
 
color: black;
 
color: black;
−
text-decoration: none;
 
 
}
 
}
−
 
+
#navlogo {
 +
flex-grow: 2;
 +
max-width: 300px;
 +
}
 +
.navlogo {
 +
  display: flex;
 +
  justify-content: center;
 +
  align-items: center;
 +
}
 +
.navlogo-img {
 +
  width: 125px;
 +
  margin-left: -43px;
 +
  margin-right: -35px;
 +
  margin-bottom: -7px;
 +
}
 +
.logo-word {
 +
  text-decoration: none;
 +
color: #d9a900;
 +
font-size: 24px;
 +
font-weight: bold;
 +
}
 
/*-----------Burger Menu Styling-------------*/
 
/*-----------Burger Menu Styling-------------*/
  
Line 103: Line 116:
 
   margin-right: 20px;
 
   margin-right: 20px;
 
   color: #d9a900;
 
   color: #d9a900;
−
   font-size: 20px;
+
   font-size: 22px;
 
}
 
}
−
 
  
 
.burger-content {
 
.burger-content {
Line 115: Line 127:
 
   z-index: 1;
 
   z-index: 1;
 
   width: 200px;
 
   width: 200px;
−
   margin-left: -200px;
+
   margin-left: -185px;
  
 
}
 
}
Line 121: Line 133:
 
.b-dropdown-main {
 
.b-dropdown-main {
 
font-weight: bold;
 
font-weight: bold;
−
font-size: 18px;
+
font-size: 15px;
 
color: #525b65;
 
color: #525b65;
 
padding: 12px 16px;
 
padding: 12px 16px;
Line 159: Line 171:
 
}
 
}
  
−
@media screen and (max-width:750px) {
+
@media screen and (max-width:730px) {
−
   #topnav li {
+
   #topnav li {
 
     display: none;
 
     display: none;
 
   }
 
   }
 
   #topnav {
 
   #topnav {
−
justify-content: space-between;
+
    justify-content: space-between;
−
}
+
  }
  
 
   #topnav li.burger {
 
   #topnav li.burger {
 
     display: block;
 
     display: block;
 
   }
 
   }
−
   #topnav li.logo{
+
   #topnav li#navlogo {
−
display: block; }
+
    display: block;
−
}
+
    flex-grow: 0;
−
.logolink {
+
   }
−
  display: flex;
+
−
  justify-content: center;
+
−
   align-items: center;
+
−
  padding-right: 40px;
+
 
}
 
}
 +
 
</style>
 
</style>
 
<body>
 
<body>
 
   <!--______________Top Navigation Bar_________________________-->
 
   <!--______________Top Navigation Bar_________________________-->
−
<ul = id="topnav">
+
<ul id="topnav">
 
<li class="dropdown"><a href="PROJECT" class="dropdown-main">PROJECT</a>
 
<li class="dropdown"><a href="PROJECT" class="dropdown-main">PROJECT</a>
 
<div class="dropdown-content">
 
<div class="dropdown-content">
Line 207: Line 216:
 
</div>
 
</div>
 
</li>
 
</li>
−
     <!--______________Logo_________________________-->
+
     <li id="navlogo">
−
<li class="logo" style="background-color: #002855">
+
      <a class="navlogo" href="https://2018.igem.org/Team:UC_Davis"><img src="https://static.igem.org/mediawiki/2018/7/73/T--UC_Davis--anchor.png" alt="DNA logo" class="navlogo-img"><b class="logo-word">Cenozoic</b></a>
−
  <a class="logolink" href="https://2018.igem.org/Team:UC_Davis">
+
     </li>
−
    <img src="https://static.igem.org/mediawiki/2018/7/73/T--UC_Davis--anchor.png" alt="Cenozoic logo" style="width: 125px;";>
+
−
    <div style = 'margin-left: -40px; font-size: 25px; color: #d9a900'; ><b>Cenozoic</b></div>
+
−
  </a>
+
−
</li>
+
−
     <li class="navlogo"><img src="" alt=""></li>
+
 
<li class="dropdown"><a href="Lab" class="dropdown-main">LAB WORK</a>
 
<li class="dropdown"><a href="Lab" class="dropdown-main">LAB WORK</a>
 
<div class="dropdown-content">
 
<div class="dropdown-content">
Line 232: Line 236:
 
     <div class="dropdown-content">
 
     <div class="dropdown-content">
 
       <a href="#">Medal Requirements</a>
 
       <a href="#">Medal Requirements</a>
−
       <a href="#">Awards</a>
+
       <a href="#">Outreach</a>
 
     </div>
 
     </div>
 
</li>
 
</li>
Line 280: Line 284:
 
<div class="b-dropdown-content">
 
<div class="b-dropdown-content">
 
             <a href="#">Medal Requirements</a>
 
             <a href="#">Medal Requirements</a>
−
             <a href="#">Awards</a>
+
             <a href="#">Outreach</a>
 
</div>
 
</div>
 
</div>
 
</div>

Revision as of 01:48, 11 August 2018

iGEM