Difference between revisions of "Team:SSTi-SZGD/css/Header"

m
(new Header)
Line 1: Line 1:
 
.page_header{ position: fixed; top: 16px; left: 0; right: 0; z-index: 9; margin: auto; min-width: 320px; background: #fff;}
 
.page_header{ position: fixed; top: 16px; left: 0; right: 0; z-index: 9; margin: auto; min-width: 320px; background: #fff;}
 
.page_header .box_header{ max-width: 1920px; margin: auto;}
 
.page_header .box_header{ max-width: 1920px; margin: auto;}
−
.page_header .box_header .page_index{ float: left;}
+
.page_header .box_header .page_index a{ display: inline-block;}
−
.page_header .box_header .page_index a{ display: inline-block; vertical-align: middle;}
+
  
−
.page_header .box_header .page_index img{ height: 45px; margin: 12.5px 0;}
+
.page_header .box_header .page_index img{ height: 45px; margin: 12px 0;}
 
.page_header .box_header .page_index .page_menu{ font-size: 2.5rem; text-align: center; background: url(https://static.igem.org/mediawiki/2018/3/33/T--SSTi-SZGD--NavIcon.png) no-repeat right center; background-size: 40px;}
 
.page_header .box_header .page_index .page_menu{ font-size: 2.5rem; text-align: center; background: url(https://static.igem.org/mediawiki/2018/3/33/T--SSTi-SZGD--NavIcon.png) no-repeat right center; background-size: 40px;}
 
.page_header .box_header .page_index .page_menu .page_title{ height: 40px; margin: 5px 0; line-height: 40px;}
 
.page_header .box_header .page_index .page_menu .page_title{ height: 40px; margin: 5px 0; line-height: 40px;}
 
.page_header .box_header .page_index .navbar-toggle{ padding: 0; margin: 0; border: none;}
 
.page_header .box_header .page_index .navbar-toggle{ padding: 0; margin: 0; border: none;}
  
−
.page_header .box_header .page_nav{ float: right; margin: 15px 0;}
+
.page_header .box_header .page_nav{ float: right; margin: 15px 0; text-align: center;}
 +
.page_header .box_header .page_nav ul{ display: inline-block; float: none;}
 
.page_header .box_header .page_nav li{ border-radius: 30px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08); margin: 5px 10px; font-weight: 600;}
 
.page_header .box_header .page_nav li{ border-radius: 30px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08); margin: 5px 10px; font-weight: 600;}
 
.page_header .box_header .page_nav li.active{ background: #ff7171}
 
.page_header .box_header .page_nav li.active{ background: #ff7171}
Line 25: Line 25:
 
.page_header .box_header .page_index{ height: 50px;}
 
.page_header .box_header .page_index{ height: 50px;}
 
.page_header .box_header .page_index img{ height: 45px; margin: 2.5px 0;}
 
.page_header .box_header .page_index img{ height: 45px; margin: 2.5px 0;}
 +
.page_header .box_header .page_nav{ text-align: left;}
 +
.page_header .box_header .page_nav ul{ display: block;}
 
 
 
}
 
}
  
−
@media (min-width: 768px) {
+
@media (min-width: 768px) and (max-width: 961px) {
 
 
−
.page_header .box_header .navbar-collapse {
+
.page_header .box_header .page_index{ margin: 32.5px 0;}
−
width: 91.66666667% !important;
+
.page_header .box_header .page_index a{ width: 50px; margin: auto;}
−
}
+
.page_header .box_header .page_index img{ margin: 0; width: 100%;}
 
 
 
}
 
}
  
−
@media (min-width: 768px) and (max-width: 992px) {
+
@media (min-width: 768px) {
−
+
−
.page_header .box_header .page_index img{ height: auto;}
+
−
+
−
}
+
−
 
+
−
@media (min-width: 992px) {
+
−
+
−
.page_header .box_header .navbar-collapse {
+
−
width: 83.33333333% !important;
+
−
}
+
−
+
−
}
+
−
 
+
−
@media (min-width: 1200px) {
+
 
 
−
.page_header .box_header .navbar-collapse {
+
.page_header .box_header .page_index{ width: 10%;}
−
width: 66.66666667% !important;
+
.page_header .box_header .page_nav { width: 90% !important;}
−
}
+
 
 
 
}
 
}

Revision as of 05:52, 29 September 2018

.page_header{ position: fixed; top: 16px; left: 0; right: 0; z-index: 9; margin: auto; min-width: 320px; background: #fff;} .page_header .box_header{ max-width: 1920px; margin: auto;} .page_header .box_header .page_index a{ display: inline-block;}

.page_header .box_header .page_index img{ height: 45px; margin: 12px 0;} .page_header .box_header .page_index .page_menu{ font-size: 2.5rem; text-align: center; background: url(T--SSTi-SZGD--NavIcon.png) no-repeat right center; background-size: 40px;} .page_header .box_header .page_index .page_menu .page_title{ height: 40px; margin: 5px 0; line-height: 40px;} .page_header .box_header .page_index .navbar-toggle{ padding: 0; margin: 0; border: none;}

.page_header .box_header .page_nav{ float: right; margin: 15px 0; text-align: center;} .page_header .box_header .page_nav ul{ display: inline-block; float: none;} .page_header .box_header .page_nav li{ border-radius: 30px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08); margin: 5px 10px; font-weight: 600;} .page_header .box_header .page_nav li.active{ background: #ff7171} .page_header .box_header .page_nav li.active a{ color: #fff;} .page_header .box_header .page_nav a{ display: block; padding: 5px 20px; color: #333; font-size: 1.5rem; border-radius: 30px;}

.page_header .box_header .page_nav a:hover{ background: #ff7171; color: #fff;}

.nav_mask{ width: 100%; height: 100%; position: fixed; background: rgba(255,255,255,0); z-index: 1; display: none;}


@media (max-width: 768px) {

.page_header{ padding: 10px 0;} .page_header .box_header .page_index{ height: 50px;} .page_header .box_header .page_index img{ height: 45px; margin: 2.5px 0;} .page_header .box_header .page_nav{ text-align: left;} .page_header .box_header .page_nav ul{ display: block;}

}

@media (min-width: 768px) and (max-width: 961px) {

.page_header .box_header .page_index{ margin: 32.5px 0;} .page_header .box_header .page_index a{ width: 50px; margin: auto;} .page_header .box_header .page_index img{ margin: 0; width: 100%;}

}

@media (min-width: 768px) {

.page_header .box_header .page_index{ width: 10%;} .page_header .box_header .page_nav { width: 90% !important;}

}