diff --git a/_includes/lesson_footer.html b/_includes/lesson_footer.html
index aefa2ee..f5724f6 100644
--- a/_includes/lesson_footer.html
+++ b/_includes/lesson_footer.html
@@ -1,60 +1,386 @@
-{% comment %}
-  Footer for lesson pages.
-{% endcomment %}
+<style>
+  * {
+    box-sizing: border-box;
+  }
+
+  footer {
+    background: linear-gradient(135deg, #2c5f7c 0%, #1e4a5f 100%);
+    color: #ffffff;
+    padding: 40px 0 20px;
+    margin-top: 60px;
+    border-top: 4px solid #9fd7dd;
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    overflow-x: hidden;
+  }
+
+  footer .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    width: 100%;
+  }
+
+  footer .footer-content {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 30px;
+    margin-bottom: 20px;
+    width: 100%;
+  }
+
+  footer .license-section {
+    padding-bottom: 25px;
+    border-bottom: 1px solid rgba(159, 215, 221, 0.3);
+    width: 100%;
+  }
+
+  footer .license-text {
+    font-size: 14px;
+    line-height: 1.8;
+    opacity: 0.95;
+  }
+
+  footer .license-text a {
+    color: #9fd7dd;
+    text-decoration: none;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    border-bottom: 1px solid transparent;
+    word-break: break-word;
+  }
+
+  footer .license-text a:hover {
+    color: #c5e8ed;
+    border-bottom: 1px solid #c5e8ed;
+  }
+
+  footer .links-section {
+    padding-bottom: 25px;
+    border-bottom: 1px solid rgba(159, 215, 221, 0.3);
+    width: 100%;
+  }
+
+  footer .help-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 10px;
+    width: 100%;
+  }
+
+  footer .help-links a {
+    color: #ffffff;
+    text-decoration: none;
+    padding: 10px 16px;
+    background: rgba(159, 215, 221, 0.15);
+    border: 1px solid rgba(159, 215, 221, 0.3);
+    border-radius: 25px;
+    transition: all 0.3s ease;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(10px);
+    white-space: nowrap;
+    text-align: center;
+    font-size: 13px;
+  }
+
+  footer .help-links a:hover {
+    background: rgba(159, 215, 221, 0.35);
+    border-color: #9fd7dd;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(159, 215, 221, 0.3);
+  }
+
+  footer .bottom-section {
+    text-align: center;
+    padding-top: 20px;
+    font-size: 13px;
+    opacity: 0.85;
+    width: 100%;
+    border-top: 1px solid rgba(159, 215, 221, 0.2);
+  }
+
+  footer .bottom-section a {
+    color: #9fd7dd;
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s ease;
+    word-break: break-word;
+  }
+
+  footer .bottom-section a:hover {
+    color: #c5e8ed;
+    text-decoration: underline;
+  }
+
+  footer .help-links a::before {
+    margin-right: 6px;
+    font-size: 16px;
+  }
+  footer .help-links a[href*="edit"]::before { content: "📝"; }
+  footer .help-links a[href*="CONTRIBUTING"]::before { content: "🤝"; }
+  footer .help-links a[href*="Source"]::before { content: "💻"; }
+  footer .help-links a[href*="CITATION"]::before { content: "📚"; }
+  footer .help-links a[href*="mailto"]::before { content: "✉️"; }
+
+  @media (min-width: 769px) {
+    footer .footer-content {
+      grid-template-columns: 1fr 1fr;
+      gap: 40px;
+    }
+
+    footer .license-section {
+      text-align: left;
+    }
+
+    footer .links-section {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    footer .help-links {
+      max-width: 100%;
+      justify-content: flex-end;
+    }
+  }
+
+  @media (max-width: 768px) {
+    footer {
+      padding: 35px 0 18px;
+    }
+
+    footer .container {
+      padding: 0 16px;
+    }
+
+    footer .footer-content {
+      gap: 20px;
+    }
+
+    footer .license-section,
+    footer .links-section {
+      text-align: center;
+      padding-bottom: 20px;
+    }
+
+    footer .license-text {
+      font-size: 13px;
+      line-height: 1.7;
+    }
+
+    footer .help-links {
+      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+      gap: 8px;
+    }
+
+    footer .help-links a {
+      padding: 10px 12px;
+      font-size: 12px;
+    }
+
+    footer .bottom-section {
+      font-size: 12px;
+      padding-top: 15px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    footer {
+      padding: 30px 0 15px;
+      margin-top: 40px;
+    }
+
+    footer .container {
+      padding: 0 12px;
+    }
+
+    footer .footer-content {
+      gap: 15px;
+    }
+
+    footer .license-section,
+    footer .links-section {
+      padding-bottom: 15px;
+    }
+
+    footer .license-text {
+      font-size: 12px;
+      line-height: 1.6;
+    }
+
+    footer .help-links {
+      grid-template-columns: 1fr;
+      gap: 8px;
+      max-width: 280px;
+      margin: 0 auto;
+    }
+
+    footer .help-links a {
+      width: 100%;
+      padding: 12px 16px;
+      font-size: 13px;
+    }
+
+    footer .bottom-section {
+      font-size: 11px;
+      padding-top: 12px;
+      line-height: 1.5;
+    }
+  }
+
+  @media (max-width: 360px) {
+    footer {
+      padding: 25px 0 12px;
+    }
+
+    footer .container {
+      padding: 0 10px;
+    }
+
+    footer .license-text {
+      font-size: 11px;
+    }
+
+    footer .help-links a {
+      padding: 10px 14px;
+      font-size: 12px;
+    }
+
+    footer .help-links a::before {
+      font-size: 14px;
+      margin-right: 4px;
+    }
+  }
+
+  @media (max-height: 500px) and (orientation: landscape) {
+    footer {
+      padding: 20px 0 10px;
+    }
+
+    footer .license-section,
+    footer .links-section {
+      padding-bottom: 15px;
+    }
+
+    footer .help-links {
+      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    }
+
+    footer .help-links a {
+      padding: 8px 12px;
+      font-size: 12px;
+    }
+  }
+
+  @media print {
+    footer {
+      background: #ffffff;
+      color: #000000;
+      border-top: 2px solid #9fd7dd;
+      box-shadow: none;
+      page-break-inside: avoid;
+    }
+
+    footer .license-text,
+    footer .bottom-section {
+      opacity: 1;
+    }
+
+    footer .help-links a {
+      background: transparent;
+      border: 1px solid #9fd7dd;
+      color: #000000;
+    }
+
+    footer .help-links a::before {
+      display: none;
+    }
+  }
+
+  @media (prefers-contrast: high) {
+    footer {
+      border-top-width: 6px;
+    }
+
+    footer .help-links a {
+      border-width: 2px;
+    }
+
+    footer .license-text a,
+    footer .bottom-section a {
+      text-decoration: underline;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    footer .help-links a {
+      transition: none;
+    }
+
+    footer .help-links a:hover {
+      transform: none;
+    }
+  }
+</style>
 
 {% include gh_variables.html %}
 
 <footer>
-  <div class="row">
-    <div class="col-md-6 license" id="license-info" align="left">
-	{% if site.carpentry == "swc" %}
-	Licensed under <a href="{{ site.cc_by_human }}">CC-BY 4.0</a> 2018–{{ 'now' | date: "%Y" }}
-	by <a href="{{ site.carpentries_site }}">The Carpentries</a>
-        <br>
-        Licensed under <a href="{{ site.cc_by_human }}">CC-BY 4.0</a> 2016–2018
-	by <a href="{{ site.swc_site }}">Software Carpentry Foundation</a>
-	{% elsif site.carpentry == "dc" %}
-	Licensed under <a href="{{ site.cc_by_human }}">CC-BY 4.0</a> 2018–{{ 'now' | date: "%Y" }}
-	by <a href="{{ site.carpentries_site }}">The Carpentries</a>
-        <br>
-        Licensed under <a href="{{ site.cc_by_human }}">CC-BY 4.0</a> 2016–2018
-	by <a href="{{ site.dc_site }}">Data Carpentry</a>
-	{% elsif site.carpentry == "lc" %}
-	Licensed under <a href="{{ site.cc_by_human }}">CC-BY 4.0</a> 2016–{{ 'now' | date: "%Y" }}
-	by <a href="{{ site.lc_site }}">Library Carpentry</a>
-	{% elsif site.carpentry == "cp" %}
-	Licensed under <a href="{{ site.cc_by_human }}">CC-BY 4.0</a> 2018–{{ 'now' | date: "%Y" }}
-	by <a href="{{ site.carpentries_site }}">The Carpentries</a>
-    {% elsif site.carpentry == "hsf" %}
-	Content licensed under <a href="{{ site.cc_by_human }}">CC-BY 4.0</a> 2020–{{ 'now' | date: "%Y" }}
-	by <a href="{{ site.hsf_site }}">HEP Software foundation</a>
-    <br>
-	Lesson setup licensed under <a href="{{ site.cc_by_human }}">CC-BY 4.0</a> 2018–{{ 'now' | date: "%Y" }}
-	by <a href="{{ site.carpentries_site }}">The Carpentries</a>
-	{% endif %}
-    </div>
-    <div class="col-md-6 help-links" align="right">
-	{% if page.source %}
-	{% if page.source == "Rmd" %}
-	<a href="{{repo_url}}/edit/{{ default_branch }}/{{page.path|replace: "_episodes", "_episodes_rmd" | replace: ".md", ".Rmd"}}" data-checker-ignore>Edit on GitHub</a>
-	{% endif %}
-	{% else %}
-	<a href="{{repo_url}}/edit/{{ default_branch }}/{{page.path}}" data-checker-ignore>Edit on GitHub</a>
-	{% endif %}
-	/
-	<a href="{{ repo_url }}/blob/{{ source_branch }}/CONTRIBUTING.md" data-checker-ignore>Contributing</a>
-	/
-	<a href="{{ repo_url }}/">Source</a>
-	/
-	<a href="{{ repo_url }}/blob/{{ source_branch }}/CITATION" data-checker-ignore>Cite</a>
-	/
-	<a href="mailto:{{ site.email }}">Contact (public mailing list)</a>
+  <div class="container">
+    <div class="footer-content">
+      <div class="license-section">
+        <div class="license-text">
+          {% if site.carpentry == "swc" %}
+            Licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a> 2018–{{ 'now' | date: "%Y" }}
+            by <a href="https://carpentries.org/">The Carpentries</a>.
+            <br>
+            Licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a> 2016–2018
+            by <a href="https://software-carpentry.org">Software Carpentry Foundation</a>.
+          {% elsif site.carpentry == "dc" %}
+            Licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a> 2018–{{ 'now' | date: "%Y" }}
+            by <a href="https://carpentries.org/">The Carpentries</a>.
+            <br>
+            Licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a> 2016–2018
+            by <a href="https://datacarpentry.org">Data Carpentry</a>.
+          {% elsif site.carpentry == "lc" %}
+            Licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a> 2016–{{ 'now' | date: "%Y" }}
+            by <a href="https://librarycarpentry.org/">Library Carpentry</a>.
+          {% elsif site.carpentry == "cp" %}
+            Licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a> 2018–{{ 'now' | date: "%Y" }}
+            by <a href="https://carpentries.org/">The Carpentries</a>.
+          {% elsif site.carpentry == "hsf" %}
+            Content licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a> 2020–{{ 'now' | date: "%Y" }}
+            by <a href="https://hepsoftwarefoundation.org/">HEP Software Foundation</a>.
+            <br>
+            Lesson setup licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a> 2018–{{ 'now' | date: "%Y" }}
+            by <a href="https://carpentries.org/">The Carpentries</a>.
+          {% endif %}
+        </div>
+      </div>
+
+      <div class="links-section">
+        <div class="help-links">
+          {% if page.source %}
+            {% if page.source == "Rmd" %}
+              <a href="{{ repo_url }}/edit/{{ page.root }}/{{ page.path | replace: "_episodes_rmd", "_episodes_rmd" }}">Edit on GitHub</a>
+            {% endif %}
+          {% else %}
+            <a href="{{ repo_url }}/edit/{{ page.root }}/{{ page.path }}">Edit on GitHub</a>
+          {% endif %}
+          
+          <a href="{{ repo_url }}/blob/{{ page.root }}/CONTRIBUTING.md">Contributing</a>
+          <a href="{{ repo_url }}/">Source</a>
+          <a href="{{ repo_url }}/blob/{{ page.root }}/CITATION">Cite</a>
+          <a href="mailto:{{ site.email }}">Contact</a>
+        </div>
+      </div>
     </div>
-  </div>
-  <div class="row">
-    <div class="col-md-12" align="center">
-      Using <a href="https://github.com/carpentries/styles/">The Carpentries style</a>
-      version <a href="https://github.com/carpentries/styles/releases/tag/v9.5.3">9.5.3</a>.
+
+    <div class="bottom-section">
+      Using <a href="https://github.com/carpentries/styles/">The Carpentries style</a> version {{ site.carpentry_style_version }}.
     </div>
   </div>
-</footer>
+</footer>
\ No newline at end of file
diff --git a/_includes/navbar.html b/_includes/navbar.html
index fcc2330..7c1f5fc 100644
--- a/_includes/navbar.html
+++ b/_includes/navbar.html
@@ -1,110 +1,370 @@
-{% comment %}
-  Lesson navigation bar.
-{% endcomment %}
-
 {% include gh_variables.html %}
 {% include manual_episode_order.html %}
 
-<nav class="navbar navbar-default">
-  <div class="container-fluid">
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-
-      {% comment %} Select what logo to display. {% endcomment %}
+<style>
+  .navbar-custom {
+    background: linear-gradient(90deg, #2c5f7c 0%, #1e4a5f 100%);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  }
+
+  .nav-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 20px;
+    height: 70px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+  }
+
+  .nav-brand {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    text-decoration: none;
+    color: #fff;
+    font-weight: 700;
+    font-size: 1.2rem;
+    z-index: 1002;
+  }
+
+  .nav-logo-img {
+    height: 32px;
+    width: auto;
+    filter: brightness(0) invert(1);
+  }
+
+  .nav-brand:hover {
+    color: #9fd7dd;
+    text-decoration: none;
+  }
+
+  .nav-center {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    flex: 1;
+    justify-content: center;
+  }
+
+  .nav-link {
+    color: rgba(255, 255, 255, 0.85);
+    text-decoration: none;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 0.95rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .nav-link:hover {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.1);
+    text-decoration: none;
+  }
+
+  .nav-dropdown {
+    position: relative;
+  }
+
+  .dropdown-menu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #ffffff;
+    min-width: 220px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+    border-radius: 12px;
+    padding: 10px 0;
+    z-index: 1100;
+    margin-top: 10px;
+  }
+  
+  .dropdown-menu::before {
+    content: '';
+    position: absolute;
+    top: -6px;
+    left: 50%;
+    margin-left: -6px;
+    border-width: 0 6px 6px;
+    border-style: solid;
+    border-color: #ffffff transparent;
+  }
+
+  .nav-dropdown:hover .dropdown-menu {
+    display: block;
+    animation: fadeIn 0.2s ease;
+  }
+
+  .dropdown-item {
+    display: block;
+    padding: 8px 20px;
+    color: #333;
+    text-decoration: none;
+    font-size: 0.9rem;
+    transition: background 0.2s;
+  }
+
+  .dropdown-item:hover {
+    background: #f0f7f9;
+    color: #2c5f7c;
+    text-decoration: none;
+  }
+
+  .dropdown-divider {
+    height: 1px;
+    background: #eee;
+    margin: 8px 0;
+  }
+
+  .nav-right {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    z-index: 1002;
+  }
+
+  .search-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .search-input {
+    background: rgba(255, 255, 255, 0.15);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 20px;
+    padding: 6px 15px 6px 35px;
+    color: #fff;
+    font-size: 0.9rem;
+    width: 160px;
+    outline: none;
+    transition: all 0.3s ease;
+  }
+
+  .search-input::placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .search-input:focus {
+    background: rgba(255, 255, 255, 0.25);
+    border-color: #9fd7dd;
+    width: 200px;
+  }
+
+  .search-icon {
+    position: absolute;
+    left: 12px;
+    color: rgba(255, 255, 255, 0.6);
+    pointer-events: none;
+    font-size: 14px;
+  }
+
+  .action-btn {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 1.1rem;
+    text-decoration: none;
+    transition: color 0.2s;
+  }
+
+  .action-btn:hover {
+    color: #9fd7dd;
+  }
+
+  .mobile-toggle {
+    display: none;
+    cursor: pointer;
+    color: white;
+    font-size: 1.5rem;
+    z-index: 1003;
+    user-select: none;
+  }
+
+  #mobile-check {
+    display: none;
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translate(-50%, 10px); }
+    to { opacity: 1; transform: translate(-50%, 0); }
+  }
+
+  @media (max-width: 992px) {
+    .mobile-toggle {
+      display: block;
+    }
+
+    .nav-center {
+      position: absolute;
+      top: 70px;
+      left: 0;
+      width: 100%;
+      background: #1e4a5f;
+      flex-direction: column;
+      align-items: stretch;
+      padding: 0;
+      gap: 0;
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.3s ease-in-out;
+      box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+    }
+
+    #mobile-check:checked ~ .nav-center {
+      max-height: 100vh;
+      padding: 20px 0;
+      border-top: 1px solid rgba(255,255,255,0.1);
+      overflow-y: auto;
+    }
+
+    .nav-link {
+      border-radius: 0;
+      padding: 15px 30px;
+      border-bottom: 1px solid rgba(255,255,255,0.05);
+      width: 100%;
+      display: block;
+    }
+
+    .nav-dropdown:hover .dropdown-menu {
+      display: none;
+    }
+
+    .nav-dropdown.active .dropdown-menu {
+      display: block;
+      position: static;
+      transform: none;
+      background: rgba(0,0,0,0.2);
+      box-shadow: none;
+      min-width: 100%;
+      margin: 0;
+    }
+
+    .dropdown-menu::before { display: none; }
+    .dropdown-item { padding-left: 50px; color: rgba(255,255,255,0.8); }
+
+    .nav-right { display: none; }
+    
+    .nav-center::after {
+      content: 'Search available on desktop';
+      color: rgba(255,255,255,0.5);
+      padding: 15px 30px;
+      font-size: 0.8rem;
+      text-align: center;
+      display: block;
+    }
+  }
+</style>
+
+<nav class="navbar-custom">
+  <div class="nav-container">
+    
+    <input type="checkbox" id="mobile-check">
+
+    <div class="nav-brand-wrapper">
       {% if site.carpentry == "swc" %}
-      <a href="{{ site.swc_site }}" class="pull-left">
-        <img class="navbar-logo" src="{{ relative_root_path }}{% link /assets/img/swc-icon-blue.svg %}" alt="Software Carpentry logo" />
-      </a>
+        <a href="{{ site.swc_site }}" class="nav-brand">
+          <img class="nav-logo-img" src="{{ relative_root_path }}{% link /assets/img/swc-icon-blue.svg %}" alt="Software Carpentry" />
+        </a>
       {% elsif site.carpentry == "dc" %}
-      <a href="{{ site.dc_site }}" class="pull-left">
-        <img class="navbar-logo" src="{{ relative_root_path }}{% link /assets/img/dc-icon-black.svg %}" alt="Data Carpentry logo" />
-      </a>
+        <a href="{{ site.dc_site }}" class="nav-brand">
+          <img class="nav-logo-img" src="{{ relative_root_path }}{% link /assets/img/dc-icon-black.svg %}" alt="Data Carpentry" />
+        </a>
       {% elsif site.carpentry == "lc" %}
-      <a href="{{ site.lc_site }}" class="pull-left">
-        <img class="navbar-logo" src="{{ relative_root_path }}{% link /assets/img/lc-icon-black.svg %}" alt="Library Carpentry logo" />
-      </a>
+        <a href="{{ site.lc_site }}" class="nav-brand">
+          <img class="nav-logo-img" src="{{ relative_root_path }}{% link /assets/img/lc-icon-black.svg %}" alt="Library Carpentry" />
+        </a>
       {% elsif site.carpentry == "cp" %}
-      <a href="{{ site.carpentries_site }}" class="pull-left">
-        <img class="navbar-logo" src="{{ relative_root_path }}{% link /assets/img/cp-logo-blue.svg %}" alt="The Carpentries logo" />
-      </a>
+        <a href="{{ site.carpentries_site }}" class="nav-brand">
+          <img class="nav-logo-img" src="{{ relative_root_path }}{% link /assets/img/cp-logo-blue.svg %}" alt="The Carpentries" />
+        </a>
       {% elsif site.carpentry == "hsf" %}
-      <a href="{{ site.hsf_site }}" class="pull-left">
-        <img class="navbar-logo" src="{{ relative_root_path }}{% link /assets/img/hsf-logo.png%}" alt="The Carpentries logo" />
-      </a>
+        <a href="{{ site.hsf_site }}" class="nav-brand">
+          <img class="nav-logo-img" src="{{ relative_root_path }}{% link /assets/img/hsf-logo.png %}" alt="HSF" />
+          <span>HSF Training</span>
+        </a>
       {% endif %}
-
-      {% comment %} Always show link to home page. {% endcomment %}
-      <a class="navbar-brand" href="{{ relative_root_path }}{% link index.md %}">Home</a>
-
     </div>
-    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-      <ul class="nav navbar-nav">
 
-	{% comment %} Always show code of conduct. {% endcomment %}
-        <li><a href="{{ relative_root_path }}{% link CODE_OF_CONDUCT.md %}">Code of Conduct</a></li>
+    <label for="mobile-check" class="mobile-toggle">
+      ☰
+    </label>
 
-        {% if site.kind == "lesson" %}
-	{% comment %} Show setup instructions. {% endcomment %}
-        <li><a href="{{ relative_root_path }}{% link setup.md %}">Setup</a></li>
+    <div class="nav-center">
+      <a class="nav-link" href="{{ relative_root_path }}{% link index.md %}">Home</a>
+      <a class="nav-link" href="{{ relative_root_path }}{% link CODE_OF_CONDUCT.md %}">Code of Conduct</a>
+
+      {% if site.kind == "lesson" %}
+        <a class="nav-link" href="{{ relative_root_path }}{% link setup.md %}">Setup</a>
 
-        {% comment %} Show lesson episodes for lessons. {% endcomment %}
         {% if lesson_episodes.size > 0 %}
-        <li class="dropdown">
-          <a href="{{ relative_root_path }}/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Episodes <span class="caret"></span></a>
-          <ul class="dropdown-menu">
+        <div class="nav-dropdown">
+          <span class="nav-link">Episodes ▾</span>
+          <div class="dropdown-menu">
             {% for lesson_episode in lesson_episodes %}
-            {% if site.episode_order %}
-              {% assign episode = site.episodes | where: "slug", lesson_episode | first %}
-            {% else %}
-              {% assign episode = lesson_episode %}
-            {% endif %}
-            <li><a href="{{ relative_root_path }}{{ episode.url }}">{{ episode.title }}</a></li>
+              {% if site.episode_order %}
+                {% assign episode = site.episodes | where: "slug", lesson_episode | first %}
+              {% else %}
+                {% assign episode = lesson_episode %}
+              {% endif %}
+              <a class="dropdown-item" href="{{ relative_root_path }}{{ episode.url }}">{{ episode.title }}</a>
             {% endfor %}
-	    <li role="separator" class="divider"></li>
-            <li><a href="{{ relative_root_path }}{% link aio.md %}">All in one page (Beta)</a></li>
-          </ul>
-        </li>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="{{ relative_root_path }}{% link aio.md %}">All in one page (Beta)</a>
+          </div>
+        </div>
         {% endif %}
-	{% endif %}
-
-	{% comment %} Show extras for lessons or if this is the main workshop-template repo (where they contain documentation). {% endcomment %}
-	{% if site.kind == "lesson" %}
-        <li class="dropdown">
-          <a href="{{ relative_root_path }}/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Extras <span class="caret"></span></a>
-          <ul class="dropdown-menu">
-            <li><a href="{{ relative_root_path }}{% link reference.md %}">Reference</a></li>
+
+        <div class="nav-dropdown">
+          <span class="nav-link">Extras ▾</span>
+          <div class="dropdown-menu">
+            <a class="dropdown-item" href="{{ relative_root_path }}{% link reference.md %}">Reference</a>
             {% for lesson_extra in lesson_extras %}
-            {% if site.extras_order %}
-              {% assign extra = site.extras | where: "slug", lesson_extra | first %}
-            {% else %}
-              {% assign extra = lesson_extra %}
-            {% endif %}
-            <li><a href="{{ relative_root_path }}{{ extra.url }}">{{ extra.title }}</a></li>
+              {% if site.extras_order %}
+                {% assign extra = site.extras | where: "slug", lesson_extra | first %}
+              {% else %}
+                {% assign extra = lesson_extra %}
+              {% endif %}
+              <a class="dropdown-item" href="{{ relative_root_path }}{{ extra.url }}">{{ extra.title }}</a>
             {% endfor %}
-          </ul>
-        </li>
-	{% endif %}
-
-	{% comment %} Always show license. {% endcomment %}
-        <li><a href="{{ relative_root_path }}{% link LICENSE.md %}">License</a></li>
-	{% if page.source %}
-	{% if page.source == "Rmd" %}
-	<li><a href="{{repo_url}}/edit/{{ default_branch }}/{{page.path|replace: "_episodes", "_episodes_rmd" | replace: ".md", ".Rmd"}}" data-checker-ignore>Improve this page <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a></li>
-	{% endif %}
-	{% else %}
-	<li><a href="{{repo_url}}/edit/{{ default_branch}}/{{page.path}}" data-checker-ignore>Improve this page <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a></li>
-	{% endif %}
-      </ul>
-      <form class="navbar-form navbar-right" role="search" id="search" onsubmit="google_search(); return false;">
-        <div class="form-group">
-          <input type="text" id="google-search" placeholder="Search..." aria-label="Google site search">
+          </div>
         </div>
+      {% endif %}
+
+      <a class="nav-link" href="{{ relative_root_path }}{% link LICENSE.md %}">License</a>
+    </div>
+
+    <div class="nav-right">
+      <form role="search" id="search" onsubmit="google_search(); return false;" class="search-wrapper">
+        <span class="search-icon">🔍</span>
+        <input type="text" id="google-search" class="search-input" placeholder="Search..." aria-label="Google site search">
       </form>
+
+      <a class="action-btn" href="https://github.com/hsf-training/hsf-training-ml-webpage/edit/gh-pages/{{ page.path }}" target="_blank" title="Improve this page">
+        ✏️
+      </a>
     </div>
+
   </div>
 </nav>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    if (window.innerWidth <= 992) {
+      var dropdowns = document.querySelectorAll('.nav-dropdown');
+      dropdowns.forEach(function(d) {
+        d.addEventListener('click', function(e) {
+          this.classList.toggle('active');
+        });
+      });
+    }
+  });
+</script>
\ No newline at end of file