Skip to content
Snippets Groups Projects
Commit c97eb1c6 authored by Bryan BRANCOTTE's avatar Bryan BRANCOTTE
Browse files

first nav-bar being responsive

WIP #2
parent 4d116713
No related branches found
No related tags found
No related merge requests found
Pipeline #14203 passed
...@@ -78,12 +78,20 @@ header .navbar-brand { ...@@ -78,12 +78,20 @@ header .navbar-brand {
font-size: 16px; font-size: 16px;
font-family: "BrandonGrotesqueBld"; 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{ header nav.header__top nav-item.active{
background: #FFFFFF30; background: #FFFFFF30;
} }
header .header__top .form-inline input:not(:focus) { header .header__top .form-inline input:not(:focus):not(:hover) {
background-color:#000; background-color:#000;
} }
...@@ -93,6 +101,7 @@ header .header__top .form-inline .form-control { ...@@ -93,6 +101,7 @@ header .header__top .form-inline .form-control {
header .header__top .dropdown-menu a, header .header__top .dropdown-menu a,
header .header__top .form-inline .btn, header .header__top .form-inline .btn,
header .header__top .navbar-nav a.nav-link,
header .header__top a { header .header__top a {
display: block; display: block;
color: #fff; color: #fff;
...@@ -103,6 +112,15 @@ header .header__top a { ...@@ -103,6 +112,15 @@ header .header__top a {
text-decoration: none; text-decoration: none;
font-family: "BrandonGrotesqueReg"; 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 { header {
border-bottom: 1px solid #aeb7c0; border-bottom: 1px solid #aeb7c0;
...@@ -220,7 +238,7 @@ header .dropdown.show>a { ...@@ -220,7 +238,7 @@ header .dropdown.show>a {
} }
header *{ 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 { /*header.scrolled .main-nav a {
......
...@@ -28,20 +28,17 @@ ...@@ -28,20 +28,17 @@
{% include_if_exists "fork_me.html"|localize_template "basetheme_bootstrap/fork_me.example.html" %} {% include_if_exists "fork_me.html"|localize_template "basetheme_bootstrap/fork_me.example.html" %}
<header class="main-header fixed-top"> <header class="main-header fixed-top">
<!-- Fixed navbar --> <!-- 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> <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"> <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" %} {% include_if_exists "upper_nav_bar.html"|localize_template "basetheme_bootstrap/upper_nav_bar.example.html" %}
</ul> </ul>
<div></div>
{% block form_in_nav_bar %} {% block form_in_nav_bar %}
<form class="form-inline mt-2 mt-md-0" action="search/" method="post"> <form class="form-inline" action="search/" method="post">
<input class="form-control mr-sm-2" type="text" placeholder="{%trans 'Type your search here'%}" aria-label="Search"> <input class="form-control " 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> <button class="form-control btn" type="submit"><span class="d-sm-none">{% trans 'Search'%} </span><i class="fa fa-search"></i></button>
</form> </form>
{% endblock %} {% endblock %}
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
...@@ -68,6 +65,10 @@ ...@@ -68,6 +65,10 @@
{%endif%} {%endif%}
</ul> </ul>
</div> </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>
<nav class="header__middle navbar navbar-expand-md navbar-light"> <nav class="header__middle navbar navbar-expand-md navbar-light">
<div class="header__logo-wrapper"> <div class="header__logo-wrapper">
......
...@@ -7,7 +7,7 @@ readme = open('README.rst').read() ...@@ -7,7 +7,7 @@ readme = open('README.rst').read()
setup( setup(
name='django-basetheme-bootstrap', name='django-basetheme-bootstrap',
version='0.2.13', version='0.2.14',
description='Django Basetheme Bootstrap', description='Django Basetheme Bootstrap',
long_description=readme, long_description=readme,
author='Bryan Brancotte', author='Bryan Brancotte',
......
{% 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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment