Skip to content
GitLab
Commit e5d69b51 authored by Hanna's avatar Hanna
Browse files

mobile menu

parent a754ad0e
Pipeline #30166 passed with stage
in 15 seconds
Hide whitespace changes
Inline Side-by-side
_includes/block-header-1.html
View file @ e5d69b51
......@@ -12,6 +12,12 @@
href="{{ nav_item.link }}">{{ nav_item.link_text }}</a></li>
{% endfor %}
</ul>
<select>
<option value="" selected="selected">Select</option>
{% for nav_item in section.navigation %}
<option value="{{ nav_item.link }}">{{ nav_item.link_text }}</option>
{% endfor %}
</select>
</nav>
</header>
\ No newline at end of file
_includes/block-irma-header-1.html 0 → 100644
View file @ e5d69b51
<div class="topnav" id="myTopnav">
<div class="block-header-1--logo">
<a id="logo" href="{{ section.url | relative_url }}">
<img src="{{ section.logo | relative_url }}" alt="{{ site.title }}">
</a>
</div>
<div id="menu">
{% for nav_item in section.navigation %}
<a class="refs" href="{{ nav_item.link }}">{{ nav_item.link_text }}</a>
{% endfor %}
<a id="toggle" href="javascript:void(0);" class="icon" onclick="myFunction()">
<img id="hamburger" src="{{ section.menu | relative_url }}" alt="Menu">
</a>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
\ No newline at end of file
_includes/head.html
View file @ e5d69b51
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<base href="{{ site.baseurl }}">
<title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
<meta name="author" content="{{ site.author }}">
<meta name="description" content="{{ site.description }}">
<link rel="stylesheet" href="/css/ubuild.css"/>
<link rel="stylesheet" href="/css/irma.css"/>
</head>
<body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<base href="{{ site.baseurl }}">
<title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
<meta name="author" content="{{ site.author }}">
<meta name="description" content="{{ site.description }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/ubuild.css" />
<link rel="stylesheet" href="/css/irma.css" />
</head>
<body>
\ No newline at end of file
css/irma.css
View file @ e5d69b51
......@@ -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%
......
index.md
View file @ e5d69b51
---
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
......
Supports Markdown
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