diff --git a/basetheme_bootstrap/static/css/basetheme_bootstrap4_pasteur.css b/basetheme_bootstrap/static/css/basetheme_bootstrap4_pasteur.css index 2c27877aba8a2206938f87c5538812232384e677..bcce8b14439f79c1dd82608940c776cbfc42c1df 100644 --- a/basetheme_bootstrap/static/css/basetheme_bootstrap4_pasteur.css +++ b/basetheme_bootstrap/static/css/basetheme_bootstrap4_pasteur.css @@ -1,3 +1,9 @@ +@media (max-width: 767px){ + body { + padding-top: calc( 80px ) !important; + } +} + .content-page-title .btn, html { font-family: "Brandon","Arial","Helvetica",sans-serif; @@ -60,7 +66,7 @@ body { header div{ } -header nav.navbar{ +header nav.header__top{ background: #211b1d; color: #fff; /*padding:0 calc( 50vw - 600px ) !important;*/ @@ -73,7 +79,7 @@ header .navbar-brand { font-family: "BrandonGrotesqueBld"; } -header nav.navbar nav-item.active{ +header nav.header__top nav-item.active{ background: #FFFFFF30; } @@ -143,8 +149,17 @@ header .dropdown.show>a { display: flex; flex-direction: row; } +/* .header__nav>.main-nav>*:not(.navbar-right){ flex:1 1 auto; +}*/ +.main-menu, +.navbar>.navbar-collapse:not(.show):not(.collapsing){ + flex:1 1 auto; +} +.navbar-collapse.show ul, +.navbar-collapse.collapsing ul{ + margin-bottom:0; } .header__logo-wrapper, .header__face-wrapper{ @@ -162,16 +177,18 @@ header .dropdown.show>a { display:flex; -moz-transition-property: background-image; -moz-transition-duration: 500ms; + padding:0; } -.main-nav li { - display:inline-block; +.header__middle .navbar-toggler{ + margin-right: 1rem; } -.main-nav li { +.main-nav:not(.show):not(.collapsing) li { + display:inline-block; display: inline-block; vertical-align: middle; margin: 0 10px; } -.main-nav ul { +.main-nav:not(.show):not(.collapsing) ul { list-style: none; margin: 0; padding: 0; @@ -206,10 +223,10 @@ header *{ transition: all 0.2s ease-out; } -header.scrolled .main-nav a { +/*header.scrolled .main-nav a { padding-top: 5px; margin-top: 5px; -} +}*/ header.scrolled .header__middle{ padding-top: 0px; @@ -227,6 +244,18 @@ header.scrolled .header__face { header.scrolled .header__logo-wrapper { padding: 0; } +@media (max-width: 767px){ + header .navbar .header__logo-wrapper { + height: 2em; + padding: 0; + margin-left: -160px; + } + header .navbar .header__logo-wrapper img { + height: 39px; + margin-top: 5px; + margin-left: 95px; + } +} header.scrolled .header__logo-wrapper img{ height: 39px; margin-top: 5px; diff --git a/basetheme_bootstrap/templates/basetheme_bootstrap/basePasteur.html b/basetheme_bootstrap/templates/basetheme_bootstrap/basePasteur.html index 90d5d766669f9ff8c9f1dc0f9f49a7356b2b6b95..b28f118670e96f5693e86691d1c6790d21583286 100644 --- a/basetheme_bootstrap/templates/basetheme_bootstrap/basePasteur.html +++ b/basetheme_bootstrap/templates/basetheme_bootstrap/basePasteur.html @@ -69,26 +69,26 @@ </ul> </div> </nav> - <div class="header__middle"> - <div class="header__logo-wrapper"> - <img src="https://www.pasteur.fr/sites/default/files/logo_institut_pasteur_noir.png" alt="Accueil"> - </div> - <div class="header__nav"> - <div></div> - <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> - <ul class="nav navbar-nav navbar-right"> - {% block extra_li_dropdown_right %}{% endblock %} - </ul> - </nav> - <div></div> - </div> - <div class="header__face-wrapper"> - <img class="header__face" src="https://www.pasteur.fr//sites/all/themes/custom/pasteur/assets/img/art/pasteur.png"> - </div> + <nav class="header__middle navbar navbar-expand-md navbar-light"> + <div class="header__logo-wrapper"> + <img src="https://www.pasteur.fr/sites/default/files/logo_institut_pasteur_noir.png" alt="Accueil"> </div> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar__middle__collapse" + aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse main-nav" id="navbar__middle__collapse"> + <ul class="links inline clearfix main-menu"> + {% include_if_exists "nav_bar.html"|localize_template "basetheme_bootstrap/nav_bar.example.html" %} + </ul> + <ul class="navbar-right"> + {% block extra_li_dropdown_right %}{% endblock %} + </ul> + </div> + <div class="header__face-wrapper d-none d-md-block"> + <img class="header__face" src="https://www.pasteur.fr//sites/all/themes/custom/pasteur/assets/img/art/pasteur.png"> + </div> + </nav> </header> <!-- Begin page content --> <main role="main" class="flex-shrink-0">