Commit 4d116713 authored by Bryan  BRANCOTTE's avatar Bryan BRANCOTTE
Browse files

second nav-bar being responsive

WIP #2
parent 3802b2f8
@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;
......
......@@ -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">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment