Difference between revisions of "Template:AshesiGhana/NavBar"

Line 7: Line 7:
  
 
<!-- icons -->
 
<!-- icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
 
 +
<link rel="stylesheet" type="text/css"
 +
href="https://2017.igem.org/Template:AshesiGhana/CSS:font-awesome.min?action=raw&ctype=text/css" />
  
 
<!--jquery-->
 
<!--jquery-->
  
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
+
<link rel="stylesheet" type="text/css"
 +
href="https://2017.igem.org/Template:AshesiGhana/CSS:Nunito?action=raw&ctype=text/css" />
 +
 
 
<!-- Latest compiled and minified CSS -->
 
<!-- 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>
+
 
 +
<link rel="stylesheet" type="text/css"
 +
href="https://2017.igem.org/Template:AshesiGhana/CSS:bootstrap.min.css?action=raw&ctype=text/css" />
 +
 
 +
<script type="text/javascript" src="https://2017.igem.org/Template:AshesiGhana/JS:MathJax?action=raw&ctype=text/javascript"></script>
 +
 
 +
<script type="text/javascript" src="https://2017.igem.org/Template:AshesiGhana/JS:jquery.min?action=raw&ctype=text/javascript"></script>
 +
 
 +
 
 +
<!-- This Part contains the metadata for the landing page-->
 +
 
 +
  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
 +
  <link rel="shortcut icon" href="favicon.ico">
 +
 
 +
  <!-- Google Webfonts -->
 +
 
 +
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:AshesiGhana/CSS:Roboto?action=raw&ctype=text/css" />
 +
 
 +
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:AshesiGhana/CSS:Montserrat?action=raw&ctype=text/css" />
 +
 
 +
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:AshesiGhana/CSS:Sanchez:400,400italic?action=raw&ctype=text/css" />
 +
 
 +
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:AshesiGhana/CSS:Playfair%2BDisplay:400,400italic?action=raw&ctype=text/css" />
 +
 
 +
       
 +
       
 +
  <style>
 +
  #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; }
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/*************************
 +
EXAMPLES 2-7 BELOW
 +
**************************/
 +
 
 +
/* EXAMPLE 2 (larger logo) - simply adjust top bottom padding to make logo larger */
 +
 
 +
.example2 .navbar-brand>img {
 +
  padding: 7px 15px;
 +
}
 +
 
 +
 
 +
/* EXAMPLE 3
 +
 
 +
line height is 20px by default so add 30px top and bottom to equal the new .navbar-brand 80px height  */
 +
 
 +
.example3 .navbar-brand {
 +
  height: 80px;
 +
}
 +
 
 +
.example3 .nav >li >a {
 +
  padding-top: 30px;
 +
  padding-bottom: 30px;
 +
}
 +
.example3 .navbar-toggle {
 +
  padding: 10px;
 +
  margin: 25px 15px 25px 0;
 +
}
 +
 
 +
 
 +
/* EXAMPLE 4 - Small Narrow Logo*/
 +
.example4 .navbar-brand>img {
 +
  padding: 7px 14px;
 +
}
 +
 
 +
 
 +
/* EXAMPLE 5 - Logo with Text*/
 +
.example5 .navbar-brand {
 +
  display: flex;
 +
  align-items: center;
 +
}
 +
.example5 .navbar-brand>img {
 +
  padding: 7px 14px;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* EXAMPLE 8 - Center on mobile*/
 +
  @media only screen and (max-width : 768px){
 +
  .example-8 .navbar-brand {
 +
  padding: 0px;
 +
  transform: translateX(-50%);
 +
  left: 50%;
 +
  position: absolute;
 +
}
 +
.example-8 .navbar-brand>img {
 +
  height: 100%;
 +
  width: auto;
 +
  padding: 7px 14px;
 +
}
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/* EXAMPLE 9 - Center with Flexbox and Text*/
 +
 
 +
body {
 +
  font-family: "Lato";
 +
}
 +
  </style>
 +
 
 +
 
 +
<!-- Animate.css -->
 +
  <!-- <link rel="stylesheet" href="https://ashbuspay.000webhostapp.com/animate.css"> -->
 +
<link rel="stylesheet" type="text/css"
 +
href="https://2017.igem.org/Template:AshesiGhana/CSS:animate?action=raw&ctype=text/css" />
 +
  <!-- Icomoon Icon Fonts-->
 +
  <!-- <link rel="stylesheet" href="https://ashbuspay.000webhostapp.com/icomoon.css"> -->
 +
 
 +
<link rel="stylesheet" type="text/css"
 +
href="https://2017.igem.org/Template:AshesiGhana/CSS:icomoon?action=raw&ctype=text/css" />
 +
  <!-- Magnific Popup -->
 +
  <!-- <link rel="stylesheet" href="https://ashbuspay.000webhostapp.com/magnific-popup.css"> -->
 +
 
 +
 
 +
<link rel="stylesheet" type="text/css"
 +
href="https://2017.igem.org/Template:AshesiGhana/CSS:magnific-popup?action=raw&ctype=text/css" />
 +
  <!-- Theme Style -->
 +
  <!-- <link rel="stylesheet" href="https://ashbuspay.000webhostapp.com/style.css"> -->
 +
 
 +
<link rel="stylesheet" type="text/css"
 +
href="https://2017.igem.org/Template:AshesiGhana/CSS?action=raw&ctype=text/css" />
 +
  <!-- Modernizr JS -->
 +
  <!-- <script src="https://ashbuspay.000webhostapp.com/js/modernizr-2.6.2.min.js"></script> -->
 +
 
 +
 
 +
 
 +
<script type="text/javascript" src="https://2017.igem.org/Template:AshesiGhana/JS:modernizr-2.6.2.min?action=raw&ctype=text/javascript"></script>
 +
 
 +
 
 +
<!-- -->
 +
 
 +
 
 +
 
  
 
<script>
 
<script>
Line 41: Line 188:
 
/***************************************************** 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; }
  
  

Revision as of 21:39, 14 October 2017