Difference between revisions of "Team:TUDelft/Head"

Line 86: Line 86:
 
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
     <link rel="icon" type="image/png" href="https://static.igem.org/mediawiki/2018/7/75/T--TUDelft--2018_adope_logo.png" />
 
     <link rel="icon" type="image/png" href="https://static.igem.org/mediawiki/2018/7/75/T--TUDelft--2018_adope_logo.png" />
 +
 +
<style>
 +
    @media screen and (min-width: 768px){
 +
    CSS
 +
}
 +
    #custom-nav {
 +
    background-color: rgba(0,0,0,0);
 +
    border: 0;
 +
    box-shadow: none;
 +
    z-index: 999;
 +
    -webkit-transition: background .5s ease-in-out, opacity .5s ease;
 +
    -moz-transition: background .5s ease-in-out, opacity .5s ease;
 +
    transition: background .5s ease-in-out, opacity .5s ease;
 +
}
 +
    #custom-nav .dropdown-menu {
 +
    border-radius: 0;
 +
    border: none;
 +
    border-top: 5px solid transparent;
 +
    background-color: transparent;
 +
    -webkit-box-shadow: none;
 +
    box-shadow: none;
 +
    padding-top: 0;
 +
}
 +
    #custom-nav .container {
 +
    padding-top: 25px;
 +
    padding-bottom: 25px;
 +
    -webkit-transition: padding-top .5s ease, padding-bottom .5s ease;
 +
    -moz-transition: padding-top .5s ease, padding-bottom .5s ease;
 +
    transition: padding-top .5s ease, padding-top .5s ease, padding-bottom .5s ease;
 +
}
 +
    #custom-nav.affix {
 +
    top: 0;
 +
    min-width: 100%;
 +
    background-color: #f8f8f8;
 +
    opacity: 0.9;
 +
    -webkit-transition: background .5s ease-in-out, opacity .5s ease;
 +
    -moz-transition: background .5s ease-in-out, opacity .5s ease;
 +
    transition: background .5s ease-in-out, opacity .5s ease;
 +
}
 +
    @media screen and (max-width: 767px){
 +
    #wrapwrap {
 +
        padding-top: 50px;
 +
    }
 +
    .navbar-fixed-top {
 +
        z-index: 999;
 +
    }
 +
}
 +
</style>   
 +
<script>
 +
$(window).scroll(function() {
 +
    if ($(".navbar").offset().top > 50) {
 +
        $('#custom-nav').addClass('affix');
 +
        $(".navbar-fixed-top").addClass("top-nav-collapse");
 +
    } else {
 +
        $('#custom-nav').removeClass('affix');
 +
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
 +
    } 
 +
});
 +
</script>
  
 
</head>
 
</head>

Revision as of 10:39, 16 October 2018

ADOPE