diff --git a/_includes/block-header-1.html b/_includes/block-header-1.html
index 6c5b688..d630cd1 100644
--- a/_includes/block-header-1.html
+++ b/_includes/block-header-1.html
@@ -12,6 +12,12 @@
href="{{ nav_item.link }}">{{ nav_item.link_text }}
{% endfor %}
+
\ No newline at end of file
diff --git a/_includes/block-irma-header-1.html b/_includes/block-irma-header-1.html
new file mode 100644
index 0000000..bafd66e
--- /dev/null
+++ b/_includes/block-irma-header-1.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/_includes/head.html b/_includes/head.html
index 02ac798..089f116 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,14 +1,17 @@
-
-
-
-
-
- {% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}
-
-
-
-
-
-
+
+
+
+
+
+
+ {% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/css/irma.css b/css/irma.css
index afff5a6..c41c506 100644
--- a/css/irma.css
+++ b/css/irma.css
@@ -18,30 +18,96 @@ html {
max-height: 4.0rem;
}
-.block-header-1 {
- padding: 0.5rem 2rem
-}
-
-header {
+/* Responsive navigation from: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav */
+.topnav {
+ overflow: hidden;
+ background-color: #fff;
border-bottom: 1px solid #000;
-webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.6);
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.6);
background-color: #fff;
position: sticky;
top: 0;
- height: 90px
+ z-index: 999999;
}
-.block-header-1--logo {
- padding-right: 30px;
+.topnav a {
+ float: left;
+ color: black;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+ font-size: 17px;
+ display: block;
}
-.block-header-1 .nav-item {
- font-size: 16px;
- padding: 0.5rem 0;
- font-size: 1.0rem
+.topnav .icon {
+ display: none;
+
}
+#menu {
+ margin-top: 4px;
+ /* todo */
+}
+
+
+#hamburger {
+ max-height: 22px;
+ /* todo */
+}
+
+
+@media screen and (min-width: 600px) {
+ #menu {
+ float: right;
+ display: flex;
+ min-height: 90px;
+ align-items: center;
+ }
+}
+
+
+@media screen and (max-width: 600px) {
+ .topnav {
+ position: static;
+ }
+
+ .topnav .refs {
+ display: none;
+ }
+
+ .topnav a.icon {
+ float: right;
+ display: block;
+ margin-top: 22px;
+ /* todo */
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .topnav.responsive {
+ position: relative;
+ }
+
+ .topnav.responsive .icon {
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+
+ .topnav.responsive a {
+ float: none;
+ display: block;
+ text-align: left;
+ }
+
+ #menu a:not(#toggle):hover {
+ background-color: #ddd;
+ }
+}
+
+
/* Scroll adjustment to make up for sticky header */
.destination {
position: absolute;
@@ -129,17 +195,10 @@ ul,
color: #000000;
}
-#myTopnav {
- display: none;
-}
/* Adjusting the size of elements */
@media screen and (min-width:700px) {
- #myTopnav {
- display: block;
- }
-
.block-hero-2 .column.text {
-ms-flex: 0 0 50%;
flex: 0 0 50%
diff --git a/index.md b/index.md
index 640e218..4c1b377 100644
--- a/index.md
+++ b/index.md
@@ -1,13 +1,15 @@
---
layout: blocks
-title: Homepage
+title: IRMA app
lang: en
lang-ref: index
date: 2017-11-22T23:00:00.000+00:00
page_sections:
- template: navigation-header
- block: header-1
+ block: irma-header-1
logo: "/uploads/non-free/irma_logo@1x.png"
+ menu: "/uploads/non-free/navigation-menu.png"
+ url: "/"
navigation:
- link: "/"
link_text: IRMA
diff --git a/uploads/non-free/navigation-menu.png b/uploads/non-free/navigation-menu.png
new file mode 100755
index 0000000..307acfb
Binary files /dev/null and b/uploads/non-free/navigation-menu.png differ
+
+ 
+
+