From 0426dc993e4820631f5e341c1b314763fefe549d Mon Sep 17 00:00:00 2001
From: Jacek Kowalski <Jacek@jacekk.info>
Date: Sat, 15 Apr 2017 14:29:04 +0000
Subject: [PATCH] Change navbar behavior on mobile devices to lower its height
---
index.html | 22 +++++++++++++---------
index.css | 27 +++++++++++++++++++++++++++
2 files changed, 40 insertions(+), 9 deletions(-)
diff --git a/index.css b/index.css
index e953480..40f000e 100644
--- a/index.css
+++ b/index.css
@@ -43,6 +43,33 @@
font-size: 21px;
}
+/* Change navbar behavior for low media width */
+.navbar-nav {
+ float: left;
+ margin: 0;
+}
+.nav > li {
+ float: left;
+}
+.navbar-nav > li > a {
+ padding-top: 15px;
+ padding-bottom: 15px;
+}
+.navbar-left {
+ float: left !important;
+}
+.navbar-form {
+ width: auto;
+ padding-top: 0;
+ padding-bottom: 0;
+ margin-right: 0;
+ margin-left: 0;
+ border: 0;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+/* Loading animation */
nav.loading {
background-image: -webkit-linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,transparent 75%,transparent);
background-image: -o-linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,transparent 75%,transparent);
diff --git a/index.html b/index.html
index ef142e6..6657d2d 100644
--- a/index.html
+++ b/index.html
@@ -11,16 +11,20 @@
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
- <div class="navbar-header">
- <a class="navbar-brand" style="display:inline-block" href="#" data-translate="page_name">TTSS Kraków</a>
- </div>
+ <ul class="nav navbar-nav">
+ <li class="navbar-header">
+ <a class="navbar-brand" href="" data-translate="page_name">TTSS Kraków</a>
+ </li>
+ <li>
+ <form class="navbar-form navbar-left">
+ <select class="form-control" id="lang-select">
+ <option value="en">EN</option>
+ <option value="pl">PL</option>
+ </select>
+ </form>
+ </li>
+ </ul>
- <form class="navbar-form navbar-left">
- <select class="form-control" id="lang-select">
- <option value="en">EN</option>
- <option value="pl">PL</option>
- </select>
- </form>
<form class="navbar-form navbar-left">
<div class="input-group">
--
Gitblit v1.9.1