Commit fb993e85 authored by Patrick's avatar Patrick

Display bootstrap menu on left side of the screen on XS device

parent a484c5c6
...@@ -96,12 +96,54 @@ body > .container { ...@@ -96,12 +96,54 @@ body > .container {
code { code {
font-size: 80%; font-size: 80%;
} }
@media(min-width:767px) { @media only screen and (min-width:768px) {
/* automatically display menu on mouse over if not xs */ /* automatically display menu on mouse over if not xs */
ul.nav li.dropdown:hover > ul.dropdown-menu { ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block; display: block;
} }
} }
@media only screen and (max-width:767px) {
.sidenav {
display:none;
height: 100%;
max-height: 100% !important;
width: 90%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
color: #818181;
display: block;
transition: 0.3s;
white-space: normal !important;
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.navbar-collapse {padding-top: 15px;}
.navbar-collapse a {font-size: 18px;}
}
}
a.skip_link{ a.skip_link{
position:absolute; position:absolute;
......
...@@ -62,15 +62,16 @@ ...@@ -62,15 +62,16 @@
<div class="container-menu"> <div class="container-menu">
<div class="navbar-header"> <div class="navbar-header">
<p class="navbar-text visible-xs-inline-block">{% repanier_group_name %}</p> <p class="navbar-text visible-xs-inline-block">{% repanier_group_name %}</p>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <button type="button" class="navbar-toggle" onclick="openNav()">
<span class="sr-only">{% trans "Toggle navigation" %}</span> <span class="sr-only">{% trans "Toggle navigation" %}</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
</div> </div>
<div class="collapse navbar-collapse"> <div id="mySidenav" class="sidenav collapse navbar-collapse">
{# <!-- Left Nav Section --> #} {# <!-- Left Nav Section --> #}
<a href="javascript:void(0)" class="visible-xs-inline-block closebtn" onclick="closeNav()">&times;</a>
<ul class="nav navbar-nav navbar-left"> <ul class="nav navbar-nav navbar-left">
<li> <li>
<a href="{% repanier_home %}"><span class="glyphicon glyphicon glyphicon-home"></span></a> <a href="{% repanier_home %}"><span class="glyphicon glyphicon glyphicon-home"></span></a>
...@@ -95,6 +96,16 @@ ...@@ -95,6 +96,16 @@
</div> </div>
</div> </div>
</div> </div>
{% addtoblock "js" %}{% spaceless %}
<script type="text/javascript">
function openNav() {
$("#mySidenav").show()
}
function closeNav() {
$("#mySidenav").hide()
}
</script>
{% endspaceless %}{% endaddtoblock %}
<a name="content"></a><section> <a name="content"></a><section>
{% if current_page.is_home %} {% if current_page.is_home %}
<div class="container-info" id="containerInfo" style="display: none"></div> <div class="container-info" id="containerInfo" style="display: none"></div>
......
...@@ -64,15 +64,16 @@ ...@@ -64,15 +64,16 @@
<div class="container-menu"> <div class="container-menu">
<div class="navbar-header"> <div class="navbar-header">
<p class="navbar-text visible-xs-inline-block">{% repanier_group_name %}</p> <p class="navbar-text visible-xs-inline-block">{% repanier_group_name %}</p>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <button type="button" class="navbar-toggle" onclick="openNav()">
<span class="sr-only">{% trans "Toggle navigation" %}</span> <span class="sr-only">{% trans "Toggle navigation" %}</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
</div> </div>
<div class="collapse navbar-collapse"> <div id="mySidenav" class="sidenav collapse navbar-collapse">
{# <!-- Left Nav Section --> #} {# <!-- Left Nav Section --> #}
<a href="javascript:void(0)" class="visible-xs-inline-block closebtn" onclick="closeNav()">&times;</a>
<ul class="nav navbar-nav navbar-left"> <ul class="nav navbar-nav navbar-left">
<li> <li>
<a href="{% repanier_home %}"><span class="glyphicon glyphicon glyphicon-home"></span></a> <a href="{% repanier_home %}"><span class="glyphicon glyphicon glyphicon-home"></span></a>
...@@ -97,6 +98,16 @@ ...@@ -97,6 +98,16 @@
</div> </div>
</div> </div>
</div> </div>
{% addtoblock "js" %}{% spaceless %}
<script type="text/javascript">
function openNav() {
$("#mySidenav").show()
}
function closeNav() {
$("#mySidenav").hide()
}
</script>
{% endspaceless %}{% endaddtoblock %}
<a name="content"></a><section> <a name="content"></a><section>
{% block base_content%}{% endblock %} {% block base_content%}{% endblock %}
</section> </section>
......
Markdown is supported
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