Commit c31dabde authored by Jacek Lebioda's avatar Jacek Lebioda
Browse files

Hamburger menu for mobile

parent bc70e829
<header id="site-header" role="banner" aria-label="Site header">
<div id="site-header-wrapper">
<a href="{{ site.baseurl }}/" class="elixir-image">
<img src="{{ site.baseurl }}/assets/ELIXIR_LU.png" title="ELIXIR LU logo" />
</a>
<div class="hamburger">
<input type="checkbox" />
<ul>
<li>
<a href="{{ site.baseurl }}/" class="elixir-image">
<img src="{{ site.baseurl }}/assets/ELIXIR_LU.png" title="ELIXIR LU logo" />
</a>
</li>
<li><a href="{{ site.baseurl }}/about-node"
{% if page.section == 'About' %} class="active" {% endif %} >
About</a>
</li>
<li><a {% if page.section == 'About' %} class="active" {% endif %} href="{{ site.baseurl }}/about-node">About</a></li>
<li><a {% if page.section == 'Services' %} class="active" {% endif %} href="{{ site.baseurl }}/services">Services</a></li>
<li><a {% if page.section == 'Training' %} class="active" {% endif %} href="{{ site.baseurl }}/training">Training</a></li>
<li><a {% if page.section == 'Events' %} class="active" {% endif %} href="{{ site.baseurl }}/events">Events</a></li>
<li><a {% if page.section == 'News' %} class="active" {% endif %} href="{{ site.baseurl }}/news">News</a></li>
<li><a {% if page.section == 'Contact' %} class="active" {% endif-%} href="{{ site.baseurl }}/contact">Contact</a></li>
</ul>
</div>
</div>
</header>
......@@ -20,7 +20,6 @@ body {
a {
color: $COLOR_BACKGROUND_HEADER;
transition: color 0.25s;
}
a:hover {
......
......@@ -15,10 +15,71 @@
}
}
.elixir-image {
position: relative;
top: 26px;
float: left;
margin-right: 82px;
img {
width: 150px;
padding-left: 10px;
}
}
.hamburger {
@media only screen and (max-width: 1000px) {
width: 50px;
height: 50px;
border: solid 2px #e6e6e6;
border-radius: 12px;
float: right;
position: relative;
top: 30px;
right: 20px;
z-index: 1;
input {
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
z-index: 10;
cursor: pointer;
-webkit-touch-callout: none;
}
input ~ ul {
display: none;
height: 0px;
}
input:checked ~ ul {
display: block;
float: left;
background-color: #023452;
width: 150px;
position: fixed;
right: 0px;
top: 60px;
padding-bottom: 9px;
height: auto;
padding-right: 5px;
li {
display: contents;
}
}
}
}
ul {
transition: height 0.25s;
margin-left: 0;
// position: relative;
// top: 66px;
position: relative;
top: 66px;
top: 31.5px;
li {
list-style: none;
......@@ -26,23 +87,12 @@
margin: 0;
padding: 0;
img {
width: 150px;
padding-left: 10px;
}
.elixir-image {
position: relative;
bottom: 46px;
}
a {
display: block;
white-space: nowrap;
padding: 5px 16px;
margin-left: 0;
color: #fefefe;
transition: color 0.25s, background 0.25s;
text-transform: uppercase;
font-size: 0.875rem;
text-decoration: none;
......@@ -57,12 +107,14 @@
a.active:hover {
color: #222;
background: #d46d11;
transition: color 0.25s;
}
a:hover {
color: $COLOR_LINK_ELIXIR;
border-color: $COLOR_LINK_ELIXIR;
text-decoration: none;
transition: color 0.25s, background 0.25s;
}
}
}
......@@ -97,6 +149,10 @@
flex-direction: column;
#left-column {
border-bottom: solid 1px #e6e6e6;
min-width: 98%;
ul {
min-width: 98%;
}
}
}
padding-bottom: 50px;
......@@ -168,7 +224,6 @@
@media only screen and (max-width: 600px) {
padding-left: 2%;
flex-direction: column;
}
div {
......@@ -214,7 +269,6 @@
font-size: 14px;
line-height: 1.1;
color: #ebebeb;
transition: color 0.25s;
padding: 1px 4px 2px 0;
border-bottom: none;
margin-bottom: 0;
......@@ -223,6 +277,7 @@
a:hover {
text-decoration: none;
transition: color 0.25s;
color: $COLOR_LINK_ELIXIR;
}
}
......@@ -275,12 +330,12 @@
text-decoration: none;
color: #ffffff;
font-weight: 800;
transition: color 0.25s;
padding-left: 15px;
padding-right: 15px;
}
a:hover {
transition: color 0.25s;
color: orange;
text-decoration: none;
}
......
......@@ -2,7 +2,7 @@
Gem::Specification.new do |spec|
spec.name = "elixir-theme"
spec.version = "0.2.4"
spec.version = "0.2.5"
spec.authors = ["jacek.lebioda"]
spec.email = ["jacek.lebioda@uni.lu"]
......
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