diff --git a/docs.it4i/src/css.css b/docs.it4i/src/css.css
index e083eff1cffca8c1822a3925585e2a7a5ef78a89..967b3127a3bb01ebb8c25c3c200df564f4ac3e09 100644
--- a/docs.it4i/src/css.css
+++ b/docs.it4i/src/css.css
@@ -10,6 +10,15 @@
     content: "help";
 }
 
+.md-nav__link_it4i {
+    display: block;
+    -webkit-transition: color .125s;
+    transition: color .125s;
+    text-overflow: ellipsis;
+    cursor: pointer;
+    overflow: hidden
+}
+
 a:not([href*="//"]) {
     /* CSS for internal links */
 }
@@ -24,3 +33,122 @@ a[href*="//"]:not( [href*='gitlab.it4i.cz'] ):not( [href*='code.it4i.cz'] ):not(
     background-size: 12px;
     padding: 1px 16px 1px 0px;
 }
+
+/* */
+.md-nav__link_it4i:after {
+    font-family: Material Icons;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: 400;
+    line-height: 1;
+    text-transform: none;
+    white-space: nowrap;
+    speak: none;
+    word-wrap: normal;
+    direction: ltr
+}
+
+.md-nav__item--nested>.md-nav__link_it4i:after {
+    content: "keyboard_arrow_down"
+}
+
+html .md-nav__link_it4i[for=toc],html .md-nav__link_it4i[for=toc]+.md-nav__link_it4i:after,html .md-nav__link_it4i[for=toc]~.md-nav {
+    display: none
+}
+
+.md-nav__link_it4i[data-md-state=blur] {
+    color: rgba(0,0,0,.54)
+}
+
+.md-nav__link_it4i--active,.md-nav__link_it4i:active {
+    color: #3f51b5
+}
+
+.md-nav__link_it4i:focus,.md-nav__link_it4i:hover {
+    color: #536dfe
+}
+@media only screen and (max-width: 59.9375em) {
+    html .md-nav__link_it4i[for=toc] {
+        display: block;
+        padding-right: 4.8rem
+    }
+
+    html .md-nav__link_it4i[for=toc]:after {
+        color: inherit;
+        content: "toc"
+    }
+
+    html .md-nav__link_it4i[for=toc]+.md-nav__link_it4i {
+        display: none
+    }
+
+    html .md-nav__link_it4i[for=toc]~.md-nav {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex
+    }
+    .md-nav--primary .md-nav__item--nested>.md-nav__link_it4i {
+        padding-right: 4.8rem
+    }
+
+    .md-nav--primary .md-nav__item--nested>.md-nav__link_it4i:after {
+        content: "keyboard_arrow_right"
+    }
+
+    .md-nav--primary .md-nav__link_it4i {
+        position: relative;
+        padding: 1.6rem
+    }
+
+    .md-nav--primary .md-nav__link_it4i:after {
+        position: absolute;
+        top: 50%;
+        right: 1.2rem;
+        margin-top: -1.2rem;
+        color: rgba(0,0,0,.54);
+        font-size: 2.4rem
+    }
+
+    .md-nav--primary .md-nav__link_it4i:focus:after,.md-nav--primary .md-nav__link_it4i:hover:after {
+        color: inherit
+    }
+
+    .md-nav--primary .md-nav--secondary .md-nav .md-nav__link_it4i {
+        padding-left: 2.8rem
+    }
+
+    .md-nav--primary .md-nav--secondary .md-nav .md-nav .md-nav__link_it4i {
+        padding-left: 4rem
+    }
+
+    .md-nav--primary .md-nav--secondary .md-nav .md-nav .md-nav .md-nav__link_it4i {
+        padding-left: 5.2rem
+    }
+
+    .md-nav--primary .md-nav--secondary .md-nav .md-nav .md-nav .md-nav .md-nav__link_it4i {
+        padding-left: 6.4rem
+    }
+}
+@media only screen and (min-width: 76.25em) {
+    .md-nav__item--nested>.md-nav__link_it4i:after {
+        display: inline-block;
+        -webkit-transform-origin: .45em .45em;
+        transform-origin: .45em .45em;
+        -webkit-transform-style: preserve-3d;
+        transform-style: preserve-3d;
+        vertical-align: -.125em
+    }
+
+    .js .md-nav__item--nested>.md-nav__link_it4i:after {
+        -webkit-transition: -webkit-transform .4s;
+        transition: -webkit-transform .4s;
+        transition: transform .4s;
+        transition: transform .4s,-webkit-transform .4s
+    }
+
+    .md-nav__item--nested .md-nav__toggle:checked~.md-nav__link_it4i:after {
+        -webkit-transform: rotateX(180deg);
+        transform: rotateX(180deg)
+    }
+
+}
diff --git a/material/partials/toc.html b/material/partials/toc.html
index 885d18a9f58b7426447b050b4fdbf9d59649b591..07a551d7756b62e2a89c4941edb746bd904cfb04 100644
--- a/material/partials/toc.html
+++ b/material/partials/toc.html
@@ -13,32 +13,30 @@
     {% set it4i_page = page.abs_url.rstrip('index.html').rstrip('/') + '.md' %}
     {% set it4i_url = 'https://docs.it4i.cz' +  page.abs_url %}
   {% endif %}
+  {% if toc_ | first is defined %}
+  <label class="md-nav__title" for="toc">{{ lang.t('toc.title') }}</label>
   <ul class="md-nav__list" data-md-scrollfix>
     <li class="md-nav__item">
-      <a href="{{ it4i_link }}" title="Edit This Page" class="md-nav__link" target="_blank">
+      <a href="{{ it4i_link }}" title="Edit This Page" class="md-nav__link_it4i" target="_blank">
 	<i class="md-icon md-icon--edit">
 	</i>
 	Edit This Page
       </a>
     </li>
     <li class="md-nav__item">
-      <a href="https://code.it4i.cz/sccs/docs.it4i.cz/issues/new?issue%5Bdescription%5D=Requested change in page [{{ it4i_page }}]({{ it4i_url }}) /cc @hrb33 @kru0052" title="Request Change" class="md-nav__link" target="_blank">
+      <a href="https://code.it4i.cz/sccs/docs.it4i.cz/issues/new?issue%5Bdescription%5D=Requested change in page [{{ it4i_page }}]({{ it4i_url }}) /cc @hrb33 @kru0052" title="Request Change" class="md-nav__link_it4i" target="_blank">
 	<i class="md-icon md-icon--check">
 	</i>
 	Request Change
       </a>
     </li>
     <li class="md-nav__item">
-      <a href="https://support.it4i.cz/rt" title="Get Support" class="md-nav__link" target="_blank">
+      <a href="https://support.it4i.cz/rt" title="Get Support" class="md-nav__link_it4i" target="_blank">
 	<i class="md-icon md-icon--help">
 	</i>
 	Get Support
       </a>
     </li>
-  </ul>
-  {% if toc_ | first is defined %}
-  <label class="md-nav__title" for="toc">{{ lang.t('toc.title') }}</label>
-  <ul class="md-nav__list" data-md-scrollfix>
     {% for toc_item in toc_ %}
     {% include "partials/toc-item.html" %}
     {% endfor %}