<header>
<nav class="navbar container"> <a href="{{site.baseurl}}/"> {% if site.logo %} <img src="{{ site.logo | relative_url }}" alt="{{site.title}}"> {% else %} <h1 class="logo">{{site.title}}</h1> {% endif %} </a> <ul class="nav-links"> {%- assign default_paths = site.pages | where: "dir", "/" | map: "path" -%} {%- assign page_paths = site.navbar_pages | default: default_paths -%} {% for path in page_paths %} {%- assign my_page = site.pages | where: "path", path | first -%} {%- if my_page.title -%} <li><a href="{{ my_page.url | relative_url }}">{{ my_page.title | escape | upcase}}</a></li> {% endif %} {% endfor %} </ul> <div class="hamburger-menu"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> </nav>
</header>
<script>
const navLinks = document.querySelector('.nav-links'); const burger = document.querySelector('.hamburger-menu'); const navbar = document.querySelector('.navbar'); // Event listeners burger.addEventListener('click', () => { navLinks.classList.toggle('nav-active'); burger.classList.toggle('bar-change'); }) // Sticky navbar window.addEventListener('scroll', () => { navbar.classList.toggle('sticky', scrollY > 0) })
</script>