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

m (NavIcon)
(final)
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
.page_header{ padding: 0; position: fixed; top: 16px; width: 100%; z-index: 9;}
+
.page_header{ position: fixed; top: 16px; left: 0; right: 0; z-index: 9; margin: auto; min-width: 320px; background: #fff;}
−
.page_header nav{ box-shadow: 0px 0px 10px #ccc; padding: 0 15px; margin-bottom: 0;}
+
.page_header .page_index{ padding: 15px; margin: 0;}
 +
.page_header .page_index .page_href img{ height: 45px;}
 +
.page_header .page_index .page_href a{ display: block;}
 +
.page_header .page_index .page_menu{ font-size: 2.5rem; text-align: left; background: url(https://static.igem.org/mediawiki/2018/3/33/T--SSTi-SZGD--NavIcon.png) no-repeat right center; background-size: 40px; }
 +
.page_header .page_menu .page_title{ height: 40px; margin: 5px 0; line-height: 40px; text-align: center;}
 +
.page_header .navbar-toggle{ padding: 0; margin: 0; border: none;}
  
−
.page_header .page_index{ padding: 0;}
+
.page_header .page_nav{ float: right; margin: 15px 0; text-align: center;}
−
.page_header .page_index .logo_img{ padding: 0;}
+
.page_header .page_nav ul{ margin: 0;}
−
.page_header .page_index .logo_img a{ height: 100%;}
+
.page_header .page_nav li{ border-radius: 30px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08); margin: 0 0 10px 0; font-weight: 600; width: 100%;}
−
.page_header .page_index .logo_img img{ height: 40px; margin: 5px 0;}
+
.page_header .page_nav li.active{ background: #ff7171}
−
.page_header .page_index .page_title{ padding: 0;}
+
.page_header .page_nav li.active a{ color: #fff;}
−
.page_header .page_index .page_title h4{ margin: 0; line-height: 50px; text-align: center;}
+
.page_header .page_nav a{ display: block; padding: 5px 20px; color: #333; font-size: 1.5rem; border-radius: 30px; text-align: left;}
−
.page_header .page_index .page_btn{ height: 50px; background: url(https://static.igem.org/mediawiki/2018/a/a8/T--SSTi-SZGD--NavIcon.svg) no-repeat right center; background-size: 30px;}
+
.page_header .page_nav a:hover{ background: #ff7171; color: #fff;}
  
−
@media only screen and (min-width: 768px) {
+
.page_header .sub_nav{ text-align: center; background: #fff; display: none;}
−
.page_header .page_list{ margin-left: 40px;}
+
.page_header .sub_nav li{ display: none;}
 +
.page_header .sub_nav a{ border-radius: 30px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08); margin: 20px 10px; font-weight: 600; padding: 5px 20px; color: #333; font-size: 1.5rem; display: inline-block;}
 +
.page_header .sub_nav a.active{ background: #ff7171; color: #fff;}
 +
.page_header .sub_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>div:first-of-type{ padding: 0;}
 +
.page_header .page_index .page_href{ padding: 0;}
 +
.page_header .page_nav ul{ width: 100%; float: none;}
 +
}
 +
 
 +
@media (min-width: 768px) {
 +
 +
.page_header .page_index{ margin: 16px 0;}
 +
.page_header .page_index .page_href img{ height: 60px;}
 +
.page_header .page_nav{ margin: 25px 0; width: 83.33333333%}
 +
.page_header .page_nav ul{ width: auto; float: right;}
 +
.page_header .page_nav li{ width: auto; margin: 5px;}
 +
 +
}
 +
 
 +
@media (min-width: 992px) {
 +
 +
.page_header .page_index{ margin: 0;}
 +
.page_header .page_index .page_href img{ height: 45px;}
 +
.page_header .page_nav{ margin: 25px 0;}
 +
.page_header .page_nav li{ width: auto; margin: 0 5px;}
 +
 
}
 
}

Latest revision as of 02:29, 2 November 2018

.page_header{ position: fixed; top: 16px; left: 0; right: 0; z-index: 9; margin: auto; min-width: 320px; background: #fff;} .page_header .page_index{ padding: 15px; margin: 0;} .page_header .page_index .page_href img{ height: 45px;} .page_header .page_index .page_href a{ display: block;} .page_header .page_index .page_menu{ font-size: 2.5rem; text-align: left; background: url(T--SSTi-SZGD--NavIcon.png) no-repeat right center; background-size: 40px; } .page_header .page_menu .page_title{ height: 40px; margin: 5px 0; line-height: 40px; text-align: center;} .page_header .navbar-toggle{ padding: 0; margin: 0; border: none;}

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

.page_header .sub_nav{ text-align: center; background: #fff; display: none;} .page_header .sub_nav li{ display: none;} .page_header .sub_nav a{ border-radius: 30px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08); margin: 20px 10px; font-weight: 600; padding: 5px 20px; color: #333; font-size: 1.5rem; display: inline-block;} .page_header .sub_nav a.active{ background: #ff7171; color: #fff;} .page_header .sub_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>div:first-of-type{ padding: 0;} .page_header .page_index .page_href{ padding: 0;} .page_header .page_nav ul{ width: 100%; float: none;} }

@media (min-width: 768px) {

.page_header .page_index{ margin: 16px 0;} .page_header .page_index .page_href img{ height: 60px;} .page_header .page_nav{ margin: 25px 0; width: 83.33333333%} .page_header .page_nav ul{ width: auto; float: right;} .page_header .page_nav li{ width: auto; margin: 5px;}

}

@media (min-width: 992px) {

.page_header .page_index{ margin: 0;} .page_header .page_index .page_href img{ height: 45px;} .page_header .page_nav{ margin: 25px 0;} .page_header .page_nav li{ width: auto; margin: 0 5px;}

}