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 with stage
in 2 minutes and 16 seconds
......@@ -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 {
......
......@@ -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">
......
......@@ -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',
......
{% 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% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment