first nav-bar being responsive

WIP #2

basetheme_bootstrap/static/css/basetheme_bootstrap4_pasteur.css

@@ -78,12 +78,20 @@ header .navbar-brand {
     font-size: 16px;
     font-family: "BrandonGrotesqueBld";
 }
+.header__top.navbar>.navbar-collapse>div{
+    flex-grow:1;
+}
+.header__top>.form-inline>.form-control{
+    display: inline-block;
+    width: auto;
+    vertical-align: middle;
+}
 
 header nav.header__top nav-item.active{
     background: #FFFFFF30;
 }
 
-header .header__top .form-inline input:not(:focus) {
+header .header__top .form-inline input:not(:focus):not(:hover) {
     background-color:#000;
 }
 
@@ -93,6 +101,7 @@ header .header__top .form-inline .form-control {
 
 header .header__top .dropdown-menu a,
 header .header__top .form-inline .btn,
+header .header__top .navbar-nav a.nav-link,
 header .header__top a {
     display: block;
     color: #fff;
@@ -103,6 +112,15 @@ header .header__top a {
     text-decoration: none;
     font-family: "BrandonGrotesqueReg";
 }
+.header__top .form-inline{
+    flex-shrink:0;
+}
+
+.navbar-dark .navbar-brand:hover,
+.navbar-dark .navbar-nav .nav-link:hover:not([aria-expanded=true]),
+header .header__top a:hover:not([aria-expanded=true]) {
+    color: #2d80e2;
+}
 
 header {
     border-bottom: 1px solid #aeb7c0;
@@ -220,7 +238,7 @@ header .dropdown.show>a {
 }
 
 header *{
-    transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out, color 0s ease-out, background-color 0s ease-out;
 }
 
 /*header.scrolled .main-nav a {

basetheme_bootstrap/templates/basetheme_bootstrap/basePasteur.html

@@ -28,20 +28,17 @@
 {% include_if_exists "fork_me.html"|localize_template "basetheme_bootstrap/fork_me.example.html" %}
 <header class="main-header fixed-top">
     <!-- Fixed navbar -->
-    <nav class="header__top navbar navbar-expand-md">
+    <nav class="header__top navbar navbar-expand-sm navbar-dark">
         <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">
-            <span class="navbar-toggler-icon"></span>
-        </button>
         <div class="collapse navbar-collapse" id="navbarCollapse">
-            <ul class="navbar-nav mr-auto">
+            <ul class="navbar-nav {% block upper_nav_bar_css_classes %}d-sm-none d-md-flex{% endblock %}">
                 {% include_if_exists "upper_nav_bar.html"|localize_template "basetheme_bootstrap/upper_nav_bar.example.html" %}
             </ul>
+            <div></div>
             {% block form_in_nav_bar %}
-            <form class="form-inline mt-2 mt-md-0" action="search/" method="post">
-                <input class="form-control mr-sm-2" type="text" placeholder="{%trans 'Type your search here'%}" aria-label="Search">
-                <button class="form-control btn my-2 my-sm-0" type="submit">Search</button>
+            <form class="form-inline" action="search/" method="post">
+                <input class="form-control " type="text" placeholder="{%trans 'Type your search here'%}" aria-label="Search">
+                <button class="form-control btn" type="submit"><span class="d-sm-none">{% trans 'Search'%} </span><i class="fa fa-search"></i></button>
             </form>
             {% endblock %}
             <ul class="nav navbar-nav navbar-right">
@@ -68,6 +65,10 @@
                 {%endif%}
             </ul>
         </div>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
+                aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
     </nav>
     <nav class="header__middle navbar navbar-expand-md navbar-light">
         <div class="header__logo-wrapper">

setup.py

@@ -7,7 +7,7 @@ readme = open('README.rst').read()
 
 setup(
     name='django-basetheme-bootstrap',
-    version='0.2.13',
+    version='0.2.14',
     description='Django Basetheme Bootstrap',
     long_description=readme,
     author='Bryan Brancotte',

test_app_1/templates/test_app_1/upper_nav_bar.html

+{% load i18n %}
+<li class="nav-item "><a href="https://www.pasteur.fr/" target="_blank" class="nav-link">{%trans "L'Institut Pasteur"%}</a></li>
+<li class="nav-item "><a href="https://www.pasteur.fr/" target="_blank" class="nav-link">{%trans "L'Institut Pasteur"%}</a></li>
\ No newline at end of file