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 visible-xs" 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 hidden-xs">
    <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>
</div>

<!-- Mobile navigation overlay -->
<div class="mobile-nav-overlay visible-xs" id="mobile-nav-overlay"></div>

<!-- Mobile navigation slider -->
<div class="mobile-nav visible-xs" id="mobile-nav">
  <div class="mobile-nav-header">
    <span class="mobile-nav-title">Menu</span>
    <button class="mobile-nav-close" id="mobile-nav-close">&times;</button>
  </div>
  
  <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 class="mobile-nav-social">
    <a href="/about">About</a>
    <a href="/guide">Guide</a>
    <a href="/getinvolved">Get Involved</a>
    <br><br>
    <a href="http://fb.com/watchoutiitr"><img src="/images/fb-logo.svg" alt="Facebook"></a>
    <a href="https://www.youtube.com/channel/UCthZ7tKOzy4EJpuVxtdcp1A"><img src="/images/youtube-play.svg" alt="YouTube"></a>
    <a href="mailto:watchout@iitr.ac.in"><img src="/images/email.png" width="20px" alt="Email"></a>
  </div>
</div>

<nav class="navbar navbar-default hidden-xs" 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>
    </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 dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ 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>
  </div>
</nav>


<script>
document.addEventListener('DOMContentLoaded', function() {
    // Mobile menu elements
  
    const mobileNav = document.getElementById('mobile-nav');
    const mobileNavOverlay = document.getElementById('mobile-nav-overlay');
    const mobileNavClose = document.getElementById('mobile-nav-close');
    const mobileToggle = document.getElementById('mobile-menu-toggle');
    // Function to open mobile menu
    function openMobileMenu() {
        if (mobileNav && mobileNavOverlay) {
            mobileNav.classList.add('show');
            mobileNavOverlay.classList.add('show');
            const toggle = document.getElementById('mobile-menu-toggle');
            if (toggle) {
                toggle.parentElement.removeChild(toggle);
            }
            document.body.style.overflow = 'hidden'; // Prevent body scroll
        }
    }
    
    // Function to close mobile menu
    function closeMobileMenu() {
        if (mobileNav && mobileNavOverlay) {
            mobileNav.classList.remove('show');
            mobileNavOverlay.classList.remove('show');
            document.body.style.overflow = ''; // Restore body scroll
            if (!document.getElementById('mobile-menu-toggle')) {
              const newToggle = document.createElement('button');
              newToggle.type = 'button';
              newToggle.id = 'mobile-menu-toggle';
              newToggle.className = 'navbar-toggle visible-xs position-fixed top-0 end-0 m-3 z-1030';
              newToggle.innerHTML = `
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              `;

              const container = document.querySelector('.pre-nav');
              if (container) container.appendChild(newToggle);

              newToggle.addEventListener('click', function(e) {
                  e.preventDefault();
                  e.stopPropagation();
                  openMobileMenu();
              });
            }

            // Close all open dropdowns
            const openDropdowns = document.querySelectorAll('.mobile-nav .dropdown.open');
            openDropdowns.forEach(function(dropdown) {
                dropdown.classList.remove('open');
            });
        }
    }
    
    // Mobile menu toggle functionality
    if (mobileToggle) {
        mobileToggle.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            if (mobileNav.classList.contains('show')) {
                closeMobileMenu();
            } else {
                openMobileMenu();
            }
        });
    }
    
    // Close button functionality
    if (mobileNavClose) {
        mobileNavClose.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            closeMobileMenu();
        });
    }
    
    // Overlay click to close
    if (mobileNavOverlay) {
        mobileNavOverlay.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            closeMobileMenu();
        });
    }

    // Mobile dropdown functionality
    const dropdownToggles = document.querySelectorAll('.mobile-nav .dropdown-toggle');
    dropdownToggles.forEach(function(toggleBtn) {
        toggleBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            const dropdown = this.parentElement;
            
            // Close other open dropdowns
            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 window is resized to desktop
    window.addEventListener('resize', function() {
        if (window.innerWidth > 768) {
            closeMobileMenu();
        }
    });
    
    // Handle navigation clicks (close menu after navigation)
    const mobileNavLinks = document.querySelectorAll('.mobile-nav a[href^="/"]');
    mobileNavLinks.forEach(function(link) {
        link.addEventListener('click', function() {///delaye
            setTimeout(closeMobileMenu, 100);
        });
    });
    
    // Prevent menu from closing when clicking inside the nav
    if (mobileNav) {
        mobileNav.addEventListener('click', function(e) {
            e.stopPropagation();
        });
    }
});
</script>