Commit c20145fe authored by alexpott's avatar alexpott

Issue #1880488 by djroshi, konstantin.komelin, LewisNyman, jibran, rteijeiro:...

Issue #1880488 by djroshi, konstantin.komelin, LewisNyman, jibran, rteijeiro: Added Make menu collapsible on small screen resolutions.
parent 5417fcfd
......@@ -565,6 +565,7 @@ h1.site-name {
list-style: none;
margin: 0;
padding: 0;
height: auto;
width: 100%;
}
#main-menu-links a {
......@@ -576,7 +577,7 @@ h1.site-name {
text-decoration: none;
text-shadow: 0 1px #eee;
border-radius: 8px;
margin-bottom: 4px;
margin: 4px 0;
padding: 0.9em 0 0.9em 10px; /* LTR */
}
[dir="rtl"] #main-menu-links a {
......@@ -595,6 +596,72 @@ h1.site-name {
border-bottom: none;
}
/* ---------- Main Menu Toggle ----------- */
#nav, #no-nav {
position: fixed;
top: 0;
}
.main-menu-reveal {
display: none;
}
body:not(:target) .main-menu-reveal {
color: #333;
background: #ccc;
background: rgba(255, 255, 255, 0.7);
float: none;
font-size: 0.929em;
display: block;
text-decoration: none;
text-shadow: 0 1px #eee;
padding: 0.9em 10px 0.9em 10px;
z-index: 1000;
}
body:not(:target) .main-menu-reveal:after {
content:"";
background: url('../../../misc/icons/ffffff/hamburger.svg') no-repeat;
background-size: contain;
width: 22px;
height: 22px;
display: inline-block;
position: absolute;
right: 10px; /* LTR */
}
body:not(:target) #nav:target ~ .main-menu-reveal,
body:not(:target) .main-menu-reveal--hide {
display: none;
}
body:not(:target) #nav:target ~ .main-menu-reveal--hide {
display: block;
}
[dir="rtl"] #secondary-menu-links {
left: 10px;
right: auto;
}
#main-menu-links .menu-hide a {
display: none;
}
body:not(:target) #nav:target ~ #main-menu-links .menu-hide a {
background-color: transparent;
border: none;
display: block;
width: 100%;
height: auto;
position: absolute;
left: 0;
right: 0;
overflow: hidden;
text-indent: -999em;
z-index: 1001;
}
body:not(:target) #main-menu-links li {
height: 0;
overflow: hidden;
}
body:not(:target) #nav:target ~ #main-menu-links li {
height: auto;
overflow: visible;
}
/* --------------- Secondary Menu ------------ */
#secondary-menu-links {
......@@ -1805,12 +1872,15 @@ div.admin-panel .description {
padding: 0;
text-align: center;
}
#main-menu-links li {
#main-menu-links li,
body:not(:target) #main-menu-links li {
float: left; /* LTR */
margin-right: 5px; /* LTR */
padding: 0;
display: inline-block;
width: 32.75%;
height: auto;
overflow: visible;
}
[dir="rtl"] #main-menu-links li {
float: right;
......@@ -1831,6 +1901,9 @@ div.admin-panel .description {
margin-bottom: 5px;
padding: 0.9em 5px;
}
body:not(:target) .main-menu-reveal {
display: none;
}
}
@media all and (min-width: 901px) {
......@@ -1864,12 +1937,15 @@ div.admin-panel .description {
margin: 0;
padding: 0 15px;
}
#main-menu-links li {
#main-menu-links li,
body:not(:target) #main-menu-links li {
float: left; /* LTR */
list-style: none;
padding: 0 1px;
margin: 0 1px;
width: auto;
height: auto;
overflow: visible;
}
[dir="rtl"] #main-menu-links li {
float: right;
......@@ -1890,6 +1966,9 @@ div.admin-panel .description {
background: #f0f0f0;
background: rgba(240, 240, 240, 1.0);
}
body:not(:target) .main-menu-reveal {
display: none;
}
}
@media all and (min-width: 520px) {
......
......@@ -121,6 +121,10 @@
{% if main_menu %}
<nav id ="main-menu" class="navigation" role="navigation">
<div id="nav"></div>
<div id="no-nav"></div>
<a class="main-menu-reveal" href="#nav">{{ 'Menu'|t }}</a>
<a class="main-menu-reveal main-menu-reveal--hide" href="#no-nav">{{ 'Menu'|t }}</a>
{{ main_menu }}
</nav> <!-- /#main-menu -->
{% endif %}
......
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