View source for Template:ETH Zurich 2

{{ETH Zurich/mainCSS}}
{{ETH Zurich/BootstrapCSS}}
{{ETH_Zurich/BootstrapResponsiveCSS}}

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">

 <style>
                /******** Bootstrap Navbar ***********/
                /**********************************
        Responsive navbar-brand image CSS
        - Remove navbar-brand padding for firefox bug workaround
        - add 100% height and width auto ... similar to how bootstrap img-responsive class works
        ***********************************/

                /*  clear bootstrap header colors */
                .navbar-default {
                    background-color: rgb(251, 251, 251); /*white;*/
                    border-bottom: 1px solid rgb(251, 251, 251);
                    padding: 2vh 0 0 0;
                    /*border-color: white; */
                }

                .navbar .navbar-brand {
                    padding: 15px;
                    background: none; /*url(https://static.igem.org/mediawiki/2017/3/35/T--ETH_Zurich--Logosmall.svg) no-repeat center;*/
                    /*width: 200px;*/
                }
                /*.navbar .navbar-brand img {
          height: 250%;
          width: auto;
          padding: 0px;
          margin: 0;
        }*/
                .navbar-brand > img {
                    max-height: 100%;
                    height: 100%;
                    width: auto;
                    margin: 0 auto;
                    /* probably not needed anymore, but doesn't hurt */
                    -o-object-fit: contain;
                    object-fit: contain;
                }

                .brand-centered .navbar-brand {
                    display: flex;
                    align-items: center;
                }

                .navbar-toggle {
                    z-index: 1;
                }
                /** RESPONSIVE **/
                /** not working ***/
                /*
        @media (max-width: 768px) {
        .navbar-header {
                float: none;
            }
            .navbar-toggle {
                display: block;
            }
            .navbar-collapse {
                border-top: 1px solid transparent;
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
            }
            .navbar-collapse.collapse {
                display: none!important;
            }
            .navbar-collapse.collapse.in {
                display: block!important;
            }
            .navbar-nav {
                float: none!important;
                margin: 7.5px -15px;
            }
            .navbar-nav>li {
                float: none;
            }
            .navbar-nav>li>a {
                padding-top: 10px;
                padding-bottom: 10px;
            }
        }
        */

                /* CSS Transform Align Navbar Brand Text ... This could also be achieved with table / table-cells */
                .navbar-alignit .navbar-header {
                    -webkit-transform-style: preserve-3d;
                    -moz-transform-style: preserve-3d;
                    transform-style: preserve-3d;
                    height: 50px;
                }
                /*.navbar-alignit .navbar-brand {
            top: 50%;
            display: block;
            position: relative;
            height: auto;
            transform: translate(0,-50%);
            margin-right: 0px;
                margin-left: 0px;
        }*/

                .navbar-nav > li > .dropdown-menu {
                    z-index: 9999;
                }

                body {
                    font-family: 'Avenir', 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif!important;
 font-weight: 100; font-size: 11px;                }

                /************* NAVBAR large dropdown ********************/
                .no-gutters {
                    margin-right: 0;
                    margin-left: 0;
                    > .col, > [class*="col-"]

                {
                    padding-right: 0;
                    padding-left: 0;
                }

                }

                .dropdown-large {
                    position: static !important;
                }

                .dropdown-menu-large {
                    width: 100%;
                    margin-left: 0px;
                    margin-right: 0px;
                    padding: 0px 0px;
                    /*text-align: left;
                      left: 0;
                      right: 0;*/
                }

                    .dropdown-menu-large > li > ul {
                        padding: 0;
                        margin: 0;
                        position: relative;
                        /*float: left;*/
                        
                    }

                        .dropdown-menu-large > li > ul > li {
                            list-style: none;
                            text-align: center;
                            
                        }

                            .dropdown-menu-large > li > ul > li > a {
                                display: block;
                                padding: 3px 20px;
                                clear: both;
                                font-weight: normal;
                                line-height: 1.428571429;
                                color: #333333;
                                white-space: normal;
                            }

                    .dropdown-menu-large > li ul > li > a:hover,
                    .dropdown-menu-large > li ul > li > a:focus {
                        text-decoration: none;
                        color: #262626;
                        background-color: #f5f5f5;
                    }

                    .dropdown-menu-large .disabled > a,
                    .dropdown-menu-large .disabled > a:hover,
                    .dropdown-menu-large .disabled > a:focus {
                        color: #999999;
                    }

                        .dropdown-menu-large .disabled > a:hover,
                        .dropdown-menu-large .disabled > a:focus {
                            text-decoration: none;
                            background-color: transparent;
                            background-image: none;
                            filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
                            cursor: not-allowed;
                        }

                    .dropdown-menu-large .dropdown-header {
                        color: #6060df;
                        font-size: 15px;
                        text-align: center;
                    }

                @media (max-width: 768px) {
                    .dropdown-menu-large {
                        margin-left: 0;
                        margin-right: 0;
                    }

                        .dropdown-menu-large > li {
                            margin-bottom: 30px;
                        }

                            .dropdown-menu-large > li:last-child {
                                margin-bottom: 0;
                            }

                        .dropdown-menu-large .dropdown-header {
                            padding: 3px 15px !important;
                            /*padding-left: 0px;*/
                        }
                }

                @media (min-width: 979px) {
                    ul.nav li.dropdown:hover > ul.dropdown-menu {
                        display: block;
                    }
                }
    </style>
</head>
<body>
    <header>
       
            <nav class="navbar navbar-default navbar-static navbar-fixed-top">
<div class="container"> 
                <div class="navbar-header">  
  
                    <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    
                    <a class="navbar-brand text-hide" href="https://2017.igem.org/Team:ETH_Zurich">
                        <img alt="Home" src="https://static.igem.org/mediawiki/2017/3/35/T--ETH_Zurich--Logosmall.svg">
                    </a>
                </div>


                <div id="navbar1" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown dropdown-large">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">IDEA</a>
                            <ul class="dropdown-menu dropdown-menu-large row no-gutters"> 
                                <li class="no-gutter">
                                    <ul> 
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/Background">Background</a></li>
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/Description">Description</a></li>
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/Applied_Design">Treatment</a></li>
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/Circuit">Circuit</a></li>
                                    </ul>
                                </li>
                            </ul>
                            
                        </li>
                        <li class="dropdown dropdown-large">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">ENGINEERING</a>
                         
                            <ul class="dropdown-menu dropdown-menu-large row no-gutters">
                                <li class="no-gutter">
                                    <ul>
                                        <li class="dropdown-header">WET LAB</li>
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/Wet_Lab">Overview</a></li>
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/Design">Project Design</a></li>
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/Experiments">Experiment Protocols</a></li>
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/Notebook">Lab Journal</a></li>
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/Safety">Safety</a></li>
                                       <!-- <li class="divider"></li>--> <br>
                                        <li class="dropdown-header">DRY LAB</li>
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/Model">Model</a></li>
                                        <li><a href="#">Results</a></li>
                                    </ul>                               
                                 </li>
                             </ul>
                        </li>
             
                         
<!--      

<li class="dropdown dropdown-large">
                            <a href="#/Collaborations" class="dropdown-toggle" data-toggle="dropdown">COLLABORATIONS</a>
                            <ul class="dropdown-menu dropdown-menu-large row no-gutters">
                                <li>
                                    <ul>
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/InterLab">InterLab Study</a></li>
                                        <li><a href="#">Freiburg</a></li>
                                        <li><a href="#">Berlin</a></li>
                                    </ul>
                                </li>
                            </ul>
                            
 
                        <li class="dropdown dropdown-large">
                            <a href="#/Collaborations" class="dropdown-toggle" data-toggle="dropdown">ACHIEVEMENTS</a>
                         
                            <ul class="dropdown-menu dropdown-menu-large row no-gutters">
                                <li>
                                    <ul>
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/Overview">Overview</a></li>
                                        <li><a href="#">Proof of Concept</a></li>
                                        <li><a href="#">Medal Criteria</a></li>
                                        <li><a href="#">Outlook</a></li>
                                    </ul>
                                </li>
                            </ul>
                            
                        </li>
-->

                    <li class="dropdown dropdown-large">
                            <a href="#/Collaborations" class="dropdown-toggle" data-toggle="dropdown">SCIENCE IN PERSPECTIVE</a>
                         
                            <ul class="dropdown-menu dropdown-menu-large row no-gutters">
                                <li>
                                    <ul>
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/Human_Practices">Human Practices</a></li>
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/HP/Silver">Public Engagement</a></li>
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/HP/Gold_Integrated">Integrated Practices</a></li>
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/Engagement">Engagement</a></li>
                                    </ul>
                                </li>
                            </ul>
                            

                        <li class="dropdown dropdown-large">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">TEAM</a>
                            <ul class="dropdown-menu dropdown-menu-large row no-gutters">
                                <li class="no-gutter">
                                    <ul>
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/Team">Team</a></li>
                                        <li><a href="https://igem.org/Team.cgi">iGEM Profile</a></li>
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/Attributions">Attributions</a></li>
                                        <li><a href="https://2017.igem.org/Team:ETH_Zurich/Sponsors">Sponsors</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>

                </div><!-- /.nav-collapse -->
</div>
            </nav>
     
    </header>
    <!--<div class="container">
        <div class="row">
            <div class="col-sm-6 col-xs-12">test1</div>
            <div class="col-sm-3 col-xs-6">test2</div>
            <div class="col-sm-3 col-xs-6">test3</div>
        </div>
    </div>-->
</body>
</html>

<!-- ORDER IMPT ?? --->

{{ETH_Zurich/mainJS}}
{{ETH_Zurich/jquery2JS}}
<!--{{ETH Zurich/jqueryJS}}-->
{{ETH_Zurich/BootstrapMinJS}}
{{ETH_Zurich/PopperMinJS}}
<!--{{ETH Zurich/testJS}}-->