1 files changed, 81 insertions, 1 deletions
diff --git a/talermerchantdemos/static/demo.css b/talermerchantdemos/static/demo.css
index c38e601..bdf9522 100644
--- a/talermerchantdemos/static/demo.css
+++ b/talermerchantdemos/static/demo.css
@@ -1,5 +1,6 @@
 @charset "UTF-8";
 /* style common to all demo pages */
+
 .demobar h1 {
   text-align: center;
 }
@@ -13,7 +14,6 @@
   color: inherit;
 }
 
-
 .tt {
   font-family: "Lucida Console", Monaco, monospace;
 }
@@ -77,3 +77,83 @@ body * {
     text-align: center;
   }
 }
+
+.navcontainer {
+  overflow: hidden;
+  background: #144;
+  margin-bottom: 50px;
+  width: 100%;
+  color: white;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0px;
+  width: 100vw;
+  backdrop-filter: blur(10px);
+  opacity: 1;
+  z-index: 10000;
+}
+
+nav {
+  left: 1vw;
+  position: relative;
+  background: #144;
+  z-index: 10000;
+}
+
+nav a,
+nav span,
+.navbtn {
+  border: none;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  background: #00000000;
+  height: inherit;
+}
+
+nav a,
+nav span,
+.navbtn {
+  padding: 15px 32px;
+}
+
+nav a:hover,
+nav span:hover,
+.navbtn:hover {
+  background: #00000022;
+}
+
+nav a.active,
+nav span.active,
+.navbtn.active {
+  background-color: #3daee9;
+}
+
+nav a.active:hover,
+nav span.active:hover,
+.navbtn.active:hover {
+  background: #0042b2;
+}
+
+nav a,
+nav span,
+.navbtn {
+  cursor: pointer;
+}
+
+nav .right {
+  float: right;
+  margin-right: 5vw;
+}
+nav .right div.nav {
+  display: none;
+}
+nav .right div.nav:hover {
+  display: block;
+}
+
+nav .right:hover div.nav {
+  display: block;
+}