diff --git a/basetheme_bootstrap/static/css/basetheme_bootstrap4_pasteur.css b/basetheme_bootstrap/static/css/basetheme_bootstrap4_pasteur.css index 9970ad84b96cbd643c843a97635cbf36d6940fa3..49d446e4714bea4bdc92bdae5ccec89b9042319d 100644 --- a/basetheme_bootstrap/static/css/basetheme_bootstrap4_pasteur.css +++ b/basetheme_bootstrap/static/css/basetheme_bootstrap4_pasteur.css @@ -32,7 +32,7 @@ html { } body { - padding-top: 3.5rem; + padding-top: calc( 3.5rem + 93px ); } @media (min-width: 1600px){ @@ -77,18 +77,21 @@ header nav.navbar nav-item.active{ background: #FFFFFF30; } -header .dropdown-menu a, -header a { +header .header__top .dropdown-menu a, +header .header__top a { display: block; color: #fff; text-transform: uppercase; padding: 8px 30px !important; font-weight: 700; - font-size: 16px; + font-size: 0.8em; text-decoration: none; font-family: "BrandonGrotesqueReg"; } +header { + border-bottom: 1px solid #aeb7c0; +} header .dropdown-menu a:hover, /*header .dropdown-menu>a:hover, header .dropdown.show>a ,*/ @@ -107,6 +110,104 @@ header .dropdown.show>a { background: #211b1d; } +.header__nav{ + flex:1 1 auto; +} +.header__logo-wrapper { + /*float: left;*/ + margin-right: 20px; +} + +header__face-wrapper { + /*float: left;*/ + margin-right: 20px; +} +.header__middle{ + /*padding-right: 1rem; + padding-left: 1rem; + padding-top: 15px; + padding-bottom: 15px;*/ + background:white; + /*background: url("https://www.pasteur.fr//sites/all/themes/custom/pasteur/assets/img/art/pasteur.png") right top no-repeat, #FFF;*/ + /*background-size: auto auto;*/ + display:flex; +-moz-transition-property: background-image; +-moz-transition-duration: 500ms; +} +.main-nav li { + display:inline-block; +} +.main-nav li { + display: inline-block; + vertical-align: middle; + margin: 0 10px; +} +.main-nav ul { + list-style: none; + margin: 0; + padding: 0; + border: 0; +} +.main-nav a { + position: relative; + display: inline-block; + font-weight: 800; + text-transform: uppercase; + color: #636060; + font-size: 1em; + padding: 5px 0; + padding-top: 41px; +} +.main-nav a:hover, +.main-nav a.active { + color: #211b1d; +} +.main-nav a:hover:after, +.main-nav a.active:after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background: #211b1d; +} + +header *{ + transition: all 0.2s ease-out; +} + +header.scrolled .main-nav a { + padding-top: 5px; +} + +header.scrolled .header__middle{ + padding-top: 0px; + padding-bottom: 0px; +} +header.scrolled .header__logo-wrapper{ + height: 2em; + /*overflow: hidden;/**/ +} +header.scrolled .header__logo-wrapper img{ + height: 39px; + margin-top: 5px; + margin-left: 63px; +} +header.scrolled .header__middle{ + background-size: auto 39px; +} +header .header__logo-wrapper{ + height: 75px; + overflow: hidden;/**/ +} +header .header__logo-wrapper img{ + height: 63px; + margin-top: 0px; + margin-left: 0px; + /*overflow: hidden;*/ +} + footer .dropdown-menu , header .dropdown-menu { background: #211b1d; diff --git a/basetheme_bootstrap/static/js/basetheme_bootstrap.js b/basetheme_bootstrap/static/js/basetheme_bootstrap.js index b9797dc712c5b63c94aa9b6617be1cf6c646746a..264f4c6b9170b256ac87edb93060e54a2a63def3 100644 --- a/basetheme_bootstrap/static/js/basetheme_bootstrap.js +++ b/basetheme_bootstrap/static/js/basetheme_bootstrap.js @@ -90,3 +90,11 @@ function delayed_action(action, instant_action, timeout){ delayAction(action, timeout); } } + +$(window).on("scroll", function() { + if ($(document).scrollTop()>20){ + $("header").addClass("scrolled"); + }else{ + $("header").removeClass("scrolled"); + } +}); diff --git a/basetheme_bootstrap/templates/basetheme_bootstrap/basePasteur.html b/basetheme_bootstrap/templates/basetheme_bootstrap/basePasteur.html index 8312c5cc8bd1eb4c3f13117aea14321b5219e1bb..e2bc062ef8090ad9638abba63125839cd91cc41d 100644 --- a/basetheme_bootstrap/templates/basetheme_bootstrap/basePasteur.html +++ b/basetheme_bootstrap/templates/basetheme_bootstrap/basePasteur.html @@ -26,9 +26,9 @@ </head> <body class="d-flex flex-column h-100"> {% include_if_exists "fork_me.html"|localize_template "basetheme_bootstrap/fork_me.example.html" %} -<header> +<header class="main-header fixed-top"> <!-- Fixed navbar --> - <nav class="navbar navbar-expand-md fixed-top"> + <nav class="header__top navbar navbar-expand-md"> <a class="navbar-brand" href="{% url 'home'%}">{% block project_name %}{% endblock %}</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> @@ -36,7 +36,6 @@ </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> - {% include_if_exists "nav_bar.html"|localize_template "basetheme_bootstrap/nav_bar.example.html" %} </ul> {% block form_in_nav_bar %} <!--<form class="form-inline mt-2 mt-md-0">--> @@ -70,6 +69,23 @@ </ul> </div> </nav> + <div class="header__middle"> + <div class="header__logo-wrapper"> + <a href="/" title="Accueil" rel="home"> + <img src="https://www.pasteur.fr/sites/default/files/logo_institut_pasteur_noir.png" alt="Accueil"> + </a> + </div> + <div class="header__nav"> + <nav class="main-nav" role="navigation"> + <ul id="main-menu" class="links inline clearfix main-menu"> + {% include_if_exists "nav_bar.html"|localize_template "basetheme_bootstrap/nav_bar.example.html" %} + </ul> + </nav> + </div> + <div class="header__face-wrapper"> + <img src="https://www.pasteur.fr//sites/all/themes/custom/pasteur/assets/img/art/pasteur.png"> + </div> + </div> </header> <!-- Begin page content --> <main role="main" class="flex-shrink-0">