Fix the display of the layout on mobile devices #113

On narrow screens, the top-level navigation bar was covering the top of
the content. By ensuring the navigation bar is collapsed by default, mobile
users are not annoyed anymore by it.
This commit is contained in:
Toover 2017-04-10 19:19:18 +02:00
parent cdf903383a
commit 34af7f5a2b

View file

@ -34,9 +34,14 @@
</script> </script>
</head> </head>
<body> <body>
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="navbar navbar-toggleable-md navbar fixed-top navbar-inverse bg-inverse"> <a class="navbar-brand" href="#">#! money?</a>
<h1 class="col-2"><a class="navbar-brand" href="{{ url_for(".home") }}">#! money?</a></h1>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav col-5 offset-md-1"> <ul class="navbar-nav col-5 offset-md-1">
{% if g.project %} {% if g.project %}
{% block navbar %} {% block navbar %}
@ -66,8 +71,6 @@
<li class="nav-item{% if g.lang == "fr" %} active{% endif %}"><a class="nav-link" href="{{ url_for(".change_lang", lang="fr") }}">fr</a></li> <li class="nav-item{% if g.lang == "fr" %} active{% endif %}"><a class="nav-link" href="{{ url_for(".change_lang", lang="fr") }}">fr</a></li>
<li class="nav-item{% if g.lang == "en" %} active{% endif %}"><a class="nav-link" href="{{ url_for(".change_lang", lang="en") }}">en</a></li> <li class="nav-item{% if g.lang == "en" %} active{% endif %}"><a class="nav-link" href="{{ url_for(".change_lang", lang="en") }}">en</a></li>
</ul> </ul>
</nav> </nav>
<div class="container-fluid"> <div class="container-fluid">