wona.github.com/_includes/navbar.html

<div class="pre-nav container">
  <a href="/">
    <div class="brand pull-left">
      <img class="logo" src="/images/logo-black.png">
      <div class="name-container">
        <div class="name">Watch Out!</div>
        <div class="desc">Student Media<br>Body of IITR</div>
      </div>
    </div>
  </a>
  
  <!-- Mobile toggle button -->
  <button type="button" class="navbar-toggle" id="mobile-menu-toggle">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  
  <div class="social pull-right">
    <a href="/about">About</a>
    <a href="/guide">Guide</a>
    <a href="/getinvolved">Get Involved</a>
    <a href="http://fb.com/watchoutiitr"><img src="/images/fb-logo.svg"></a>
    <a href="https://www.youtube.com/channel/UCthZ7tKOzy4EJpuVxtdcp1A"><img src="/images/youtube-play.svg"></a>
    <a href="mailto:watchout@iitr.ac.in"><img src="/images/email.png" width="16px"></a>
  </div>
  
  <!-- Mobile navigation menu -->
  <div class="mobile-nav" id="mobile-nav">
    <ul class="nav">
      {% for cat in site.data.categories %}
      {% if cat.subcategories != nil %}
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-category="{{ cat.name }}">{{ cat.title }}</a>
        <ul class="dropdown-menu">
          {% for subcat in cat.subcategories %}
          {% if site.categories[subcat.name] != nil %}
          <li><a href="/category/{{ subcat.name }}/">{{ subcat.title }}</a></li>
          {% endif %}
          {% endfor %}
        </ul>
      </li>
      {% elsif site.categories[cat.name] != nil%}
      <li><a href="/category/{{ cat.name }}/">{{ cat.title }}</a></li>
      {% endif %}
      {% endfor %}
    </ul>
  </div>
</div>

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="110">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
        aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- <a class="navbar-brand" href="/">Watch Out!</a> -->
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right hacky-css">
        {% for cat in site.data.categories %}
        {% if cat.subcategories != nil %}
        <li class="dropdown">
          <a class="hover-underline" href="#" class="dropdown-toggle" data-toggle="dropdown">{{ cat.title }} <span
              class="caret"></span></a>
          <ul class="dropdown-menu">
            {% for subcat in cat.subcategories %}
            {% if site.categories[subcat.name] != nil %}
            <li><a class="hover-underline" href="/category/{{ subcat.name }}/">{{ subcat.title }}</a></li>
            {% endif %}
            {% endfor %}
          </ul>
        </li>
        {% elsif site.categories[cat.name] != nil%}
        <li><a class="hover-underline" href="/category/{{ cat.name }}/">{{ cat.title }}</a></li>
        {% endif %}
        {% endfor %}
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>

<!-- Mobile Navigation JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Mobile menu toggle functio
    const mobileToggle = document.getElementById('mobile-menu-toggle');
    const mobileNav = document.getElementById('mobile-nav');
    
    if (mobileToggle && mobileNav) {
        mobileToggle.addEventListener('click', function() {
            mobileNav.classList.toggle('show');
        });
    }

    // Mobile dropdown functionality
    const dropdownToggles = document.querySelectorAll('.mobile-nav .dropdown-toggle');
    dropdownToggles.forEach(function(toggleBtn) {
        toggleBtn.addEventListener('click', function(e) {
            e.preventDefault();
            const dropdown = this.parentElement;
            
            // Close other open dropdowns jab some other dropdown is clicked
            const otherDropdowns = document.querySelectorAll('.mobile-nav .dropdown.open');
            otherDropdowns.forEach(function(otherDropdown) {
                if (otherDropdown !== dropdown) {
                    otherDropdown.classList.remove('open');
                }
            });
            
            dropdown.classList.toggle('open');
        });
    });
    
    // Close mobile menu when clicking outside
    document.addEventListener('click', function(e) {
        if (mobileNav && !mobileNav.contains(e.target) && !mobileToggle.contains(e.target)) {
            mobileNav.classList.remove('show');
        }
    });
});
</script>